jQuery sliders

ขั้นตอนติดตั้ง Beatiful jQuery  Slider  

Login เข้าไปที่ blogger.com จากแผงควบคุมไปที่ >> การออกแบบ >> แก้ไข HTML  โดยไม่ต้องขยายแม่แบบเครื่องมือ



ขั้นที่ 1 กำหนด CSS ของ Beatiful jQuery  Slider
ค้นหาโค้ด ]]></b:skin> และวางโค้ดต่อไปนี้ลงไปก่อนหน้าโค้ดดังกล่าว

/*jQuery beatiful Slider EDIT by http://www.hackublog.com*/      
div.wrap1{       
width : 960px;       
margin : 0 auto;       
text-align : left;       
}       
div.wrap1 a{color:#ffffff;}       
div#top div#nav{       
float : left;       
clear : both;       
width : 960px;       
height : 52px;       
margin : 22px 0 0;       
background:url(http://upic.me/i/kg/navbg.png) 0 0 no-repeat;       
}       
div#top div#nav ul{       
float:left;       
width:700px;       
height:52px;       
list-style-type:none;       
}       
div#nav ul li{       
float:left;       
height:52px;       
}       
div#nav ul li a{       
border:0;       
height:52px;       
display:block;       
line-height:52px;       
text-indent:-9999px;       
}       
div#HackublogSlider{       
margin:-1px 0 0;       
}       
div#video-header1{       
height:683px;       
margin:-1px 0 0;       
}       
div#HackublogSlider div.wrap1{       
height:289px;       
background:url(http://upic.me/i/rr/headerbg960.png) 50% 0 no-repeat;       
}       
div#HackublogSlider div#slide-holder{       
z-index : 40;       
width : 960px;       
height : 289px;       
position : absolute;       
}       
div#HackublogSlider div#slide-holder div#slide-runner{       
top : 9px;       
left : 9px;       
width : 940px;       
height : 278px;       
overflow : hidden;       
position : absolute;       
}       
div#HackublogSlider div#slide-holder img{       
margin:0;       
display:none;       
position:absolute;       
}       
div#HackublogSlider div#slide-holder div#slide-controls{       
left : 0;       
bottom : 228px;       
width : 940px;       
height : 46px;       
display : none;       
position : absolute;       
background:url(http://upic.me/i/s3/slidebg.png) 0 0;       
}       
div#HackublogSlider div#slide-holder div#slide-controls p.text{       
float:left;       
color:#fff;       
display:inline;       
font-size:10px;       
line-height:16px;       
margin:15px 0 0 20px;       
text-transform:uppercase;       
}       
div#HackublogSlider div#slide-holder div#slide-controls p#slide-nav{       
float:right;       
height:24px;       
display:inline;       
margin:11px 15px 0 0;       
}       
div#HackublogSlider div#slide-holder div#slide-controls p#slide-nav a{       
float:left;       
width:24px;       
height:24px;       
display:inline;       
font-size:11px;       
margin:0 5px 0 0;       
line-height:24px;       
font-weight:bold;       
text-align:center;       
text-decoration:none;       
background-position:0 0;       
background-repeat:no-repeat;       
}       
div#HackublogSlider div#slide-holder div#slide-controls p#slide-nav a.on{       
background-position:0 -24px;       
}       
div#HackublogSlider div#slide-holder div#slide-controls p#slide-nav a{background-image:url(http://upic.me/i/qa/sildenav.png);}       
div#nav ul li a{background:url(http://upic.me/i/kg/navbg.png) no-repeat;}

ขั้นที่ 2 ติดตั้ง jQuery และจาวาสคริปต์
ต่อเนื่องจากขั้นที่ 1 ค้นหาโค้ด </head> และวางโค้ดต่อไปนี้ลงไปก่อนหน้าโค้ดดังกล่าว

<script type="text/javascript">var _siteRoot='index.html',_root='index.html';</script>      
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type="text/javascript"/>       
<script type='text/javascript'>
//<![CDATA[
window.onerror=function(desc,page,line,chr){
/* alert('JavaScript error occurred! \n'
  +'\nError description: \t'+desc
  +'\nPage address:      \t'+page
  +'\nLine number:       \t'+line
 );*/
}

$(function(){
 $('a').focus(function(){this.blur();});
 SI.Files.stylizeAll();
 slider.init();

 $('input.text-default').each(function(){
  $(this).attr('default',$(this).val());
 }).focus(function(){
  if($(this).val()==$(this).attr('default'))
   $(this).val('');
 }).blur(function(){
  if($(this).val()=='')

ขั้นที่ 3 กำหนดตำแหน่งและเรียกใช้ Beatiful jQuery  Slider

ต่อเนื่องจากขั้นที่ 2 การวาง HTML นั้นพิจารณาดังนี้
3.1 กรณีใช้แม่แบบจากการติดตั้งเอง

   $(this).val($(this).attr('default'));
 });

 $('input.text,textarea.text').focus(function(){
  $(this).addClass('textfocus');
 }).blur(function(){
  $(this).removeClass('textfocus');
 });

 var popopenobj=0,popopenaobj=null;
 $('a.popup').click(function(){
  var pid=$(this).attr('rel').split('|')[0],_os=parseInt($(this).attr('rel').split('|')[1]);
  var pobj=$('#'+pid);
  if(!pobj.length)
   return false;
  if(typeof popopenobj=='object' && popopenobj.attr('id')!=pid){
   popopenobj.hide(50);
   $(popopenaobj).parent().removeClass(popopenobj.attr('id').split('-')[1]+'-open');
   popopenobj=null;
  }
  return false;
 });
 $('p.images img').click(function(){
  var newbg=$(this).attr('src').split('bg/bg')[1].split('-thumb')[0];
  $(document.body).css('backgroundImage','url('+_siteRoot+'images/bg/bg'+newbg+'.jpg)');
 
  $(this).parent().find('img').removeClass('on');
  $(this).addClass('on');
  return false;
 });
 $(window).load(function(){
  $.each(css_ims,function(){(new Image()).src=_siteRoot+'css/images/'+this;});
  $.each(css_cims,function(){
   var css_im=this;
   $.each(['blue','purple','pink','red','grey','green','yellow','orange'],function(){
    (new Image()).src=_siteRoot+'css/'+this+'/'+css_im;
   });
  });
 }); 
 $('div.sc-large div.img:has(div.tml)').each(function(){
  $('div.tml',this).hide();
  $(this).append('<a href="#" class="tml_open">&nbsp;</a>').find('a').css({
   left:parseInt($(this).offset().left)+864,top:parseInt($(this).offset().top)+1
  }).click(function(){
   $(this).siblings('div.tml').slideToggle();
   return false;
  }).focus(function(){this.blur();}); 
 });
});
var slider={
 num:-1,
 cur:0,
 cr:[],
 al:null,
 at:10*1000,
 ar:true,
 init:function(){
  if(!slider.data || !slider.data.length)
   return false;

  var d=slider.data;
  slider.num=d.length;
  var pos=Math.floor(Math.random()*1);//slider.num);
  for(var i=0;i<slider.num;i++){
   $('#'+d[i].id).css({left:((i-pos)*1000)});
   $('#slide-nav').append('<a id="slide-link-'+i+'" href="#" onclick="slider.slide('+i+');return false;" onfocus="this.blur();">'+(i+1)+'</a>');
  }

  $('img,div#slide-controls',$('div#slide-holder')).fadeIn();
  slider.text(d[pos]);
  slider.on(pos);
  slider.cur=pos;
  window.setTimeout('slider.auto();',slider.at);
 },
 auto:function(){
  if(!slider.ar)
   return false;

  var next=slider.cur+1;
  if(next>=slider.num) next=0;
  slider.slide(next);
 },
 slide:function(pos){
  if(pos<0 || pos>=slider.num || pos==slider.cur)
   return;

  window.clearTimeout(slider.al);
  slider.al=window.setTimeout('slider.auto();',slider.at);

  var d=slider.data;
  for(var i=0;i<slider.num;i++)
   $('#'+d[i].id).stop().animate({left:((i-pos)*1000)},1000,'swing');
  
  slider.on(pos);
  slider.text(d[pos]);
  slider.cur=pos;
 },
 on:function(pos){
  $('#slide-nav a').removeClass('on');
  $('#slide-nav a#slide-link-'+pos).addClass('on');
 },
 text:function(di){
  slider.cr['a']=di.client;
  slider.cr['b']=di.desc;
  slider.ticker('#slide-client span',di.client,0,'a');
  slider.ticker('#slide-desc',di.desc,0,'b');
 },
 ticker:function(el,text,pos,unique){
  if(slider.cr[unique]!=text)
   return false;

  ctext=text.substring(0,pos)+(pos%2?'-':'_');
  $(el).html(ctext);

  if(pos==text.length)
   $(el).html(text);
  else
   window.setTimeout('slider.ticker("'+el+'","'+text+'",'+(pos+1)+',"'+unique+'");',30);
 }
};
// STYLING FILE INPUTS 1.0 | Shaun Inman <http://www.shauninman.com/> | 2007-09-07
if(!window.SI){var SI={};};
SI.Files={
 htmlClass:'SI-FILES-STYLIZED',
 fileClass:'file',
 wrapClass:'cabinet',
 
 fini:false,
 able:false,
 init:function(){
  this.fini=true;
 },
 stylize:function(elem){
  if(!this.fini){this.init();};
  if(!this.able){return;};
  
  elem.parentNode.file=elem;
  elem.parentNode.onmousemove=function(e){
   if(typeof e=='undefined') e=window.event;
   if(typeof e.pageY=='undefined' &&  typeof e.clientX=='number' && document.documentElement){
    e.pageX=e.clientX+document.documentElement.scrollLeft;
    e.pageY=e.clientY+document.documentElement.scrollTop;
   };
   var ox=oy=0;
   var elem=this;
   if(elem.offsetParent){
    ox=elem.offsetLeft;
    oy=elem.offsetTop;
    while(elem=elem.offsetParent){
     ox+=elem.offsetLeft;
     oy+=elem.offsetTop;
    };
   };
  };
 },
 stylizeAll:function(){
  if(!this.fini){this.init();};
  if(!this.able){return;};
 }
};
//]]>
</script>

ให้ค้นหาโค้ด

<div id='content-wrapper'>

ซึ่งบางแม่แบบอาจพบโค้ดเป็น

<div id='content'>

เมื่อพบแล้วให้วาง HTML ก่อนหน้าหรือถัดจากโค้ดที่พบตามข้างต้น


3.2 กรณีใช้แม่แบบที่ออกแบบเองโดยใช้เครื่องมือของ Blogger in Draft 
ให้ค้นหาโค้ด

<div class='fauxborder-left tabs-fauxborder-left'>

และวาง HTML ก่อนหน้าโค้ดที่พบตามข้างต้น


3.3 โค้ด HTML สำหรับติดตั้ง Beatiful jQuery  Slider  

<div id='HackublogSlider'>     
<div class='wrap1'> 
<div id='slide-holder'>     
<div id='slide-runner'>      
    <a href=''><img alt='' class='slide' height='262' id='slide-img-1' src='http://upic.me/i/s4/naturephoto.png' width='940'/></a>       
    <a href=''><img alt='' class='slide' height='262' id='slide-img-2' src='http://upic.me/i/yt/naturephoto1.png' width='940'/></a>        
    <a href=''><img alt='' class='slide' height='262' id='slide-img-3' src='http://upic.me/i/33/naturephoto2.png' width='940'/></a>        
    <a href=''><img alt='' class='slide' height='262' id='slide-img-4' src='http://upic.me/i/pt/naturephoto3.png' width='940'/></a>        
    <a href=''><img alt='' class='slide' height='262' id='slide-img-5' src='http://upic.me/i/hm/naturephoto4.png' width='940'/></a>        
    <a href=''><img alt='' class='slide' height='262' id='slide-img-6' src='http://upic.me/i/s9/naturephoto5.png' width='940'/></a>        
      <a href=''><img alt='' class='slide' height='262' id='slide-img-7' src='http://upic.me/i/yo/naturephoto6.png' width='940'/></a>       
    <div id='slide-controls'>      
     <p class='text' id='slide-client'><strong>post: </strong><span/></p>      
     <p class='text' id='slide-desc'/>      
     <p id='slide-nav'/>      
     </div>      
</div>      
</div> 
<script type='text/javascript'>     
if(!window.slider) var slider={};      
slider.data=[      
{"id":"slide-img-1","client":"nature beauty","desc":"nature beauty photography"},       
{"id":"slide-img-2","client":"nature beauty","desc":"add your description here"},        
{"id":"slide-img-3","client":"nature beauty","desc":"add your description here"},        
{"id":"slide-img-4","client":"nature beauty","desc":"add your description here"},        
{"id":"slide-img-5","client":"nature beauty","desc":"add your description here"},        
{"id":"slide-img-6","client":"nature beauty","desc":"add your description here"},        
{"id":"slide-img-7","client":"nature beauty","desc":"add your description here"}        
];      
</script>      
</div></div><!--/HackublogSlider-->

3.4 การเปลี่ยนรูป

การเปลี่ยนรูปให้เปลี่ยนได้ในชุดโค้ดสีเขียว  โดยการสร้างภาพที่มีขนาด 940 x 262 px แล้วฝากรูปไว้ที่รับฝากฟรี เช่น picasa,photobucket หรือ upic.me เป็นต้น จากนั้นนำมาแทนที่ URL ของภาพเดิม

<a href=''><img alt='' class='slide' height='262' id='slide-img-1' src='http://upic.me/i/s4/naturephoto.png' width='940'/></a>         
    <a href=''><img alt='' class='slide' height='262' id='slide-img-2' src='http://upic.me/i/yt/naturephoto1.png' width='940'/></a>         
    <a href=''><img alt='' class='slide' height='262' id='slide-img-3' src='http://upic.me/i/33/naturephoto2.png' width='940'/></a>         
    <a href=''><img alt='' class='slide' height='262' id='slide-img-4' src='http://upic.me/i/pt/naturephoto3.png' width='940'/></a>         
    <a href=''><img alt='' class='slide' height='262' id='slide-img-5' src='http://upic.me/i/hm/naturephoto4.png' width='940'/></a>         
    <a href=''><img alt='' class='slide' height='262' id='slide-img-6' src='http://upic.me/i/s9/naturephoto5.png' width='940'/></a>         
      <a href=''><img alt='' class='slide' height='262' id='slide-img-7' src='http://upic.me/i/yo/naturephoto6.png' width='940'/></a> 

3.5 การใส่ Link ให้กับรูปภาพใน Slide
การใส่ Link ให้กับรูปภาพสามารถทำได้โดยใส่ URL ที่ต้องการลงไปใน Tag <a> เช่น

<a 'ใส่ Link ตรงนี้'><img alt='' class='slide' height='262' id='slide-img-1' src='http://upic.me/i/s4/naturephoto.png' width='940'/></a>

3.6 การใส่คำอธิบาย
การใส่คำอธิบายแต่ละภาพให้ใส่ในชุดโค้ด 

{"id":"slide-img-1","client":"ใส่ Title","desc":"ใส่คำอธิบาย"},          
{"id":"slide-img-2","client":"ใส่ Title","desc":"ใส่คำอธิบาย"},           
{"id":"slide-img-3","client":"ใส่ Title","desc":"ใส่คำอธิบาย"},           
{"id":"slide-img-4","client":"ใส่ Title","desc":"ใส่คำอธิบาย"},           
{"id":"slide-img-5","client":"ใส่ Title","desc":"ใส่คำอธิบาย"},           
{"id":"slide-img-6","client":"ใส่ Title","desc":"ใส่คำอธิบาย"},
{"id":"slide-img-7","client":"ใส่ Title","desc":"ใส่คำอธิบาย"}

3.7 การเพิ่มหรือลบจำนวนภาพ

ค่าดั้งเดิมที่ใส่ไว้คือ 7 ภาพ คุณสามารถลบหรือเพิ่มจำนวนภาพโดยเพิ่มชุดโค้ดดังนี้

ตัวอย่างถ้าผมต้อการเพิ่มจากเดิม 7 ภาพให้เป็น 10 ภาพ ผมก็จะต้องเพิ่มโค้ดเข้าไปอีก 3 ชุดได้แก่

<a href=''><img alt='' class='slide' height='262' id='slide-img-8' src='ใส่ URL ภาพที่8' width='940'/></a>           
<a href=''><img alt='' class='slide' height='262' id='slide-img-9' src='ใส่ URL ภาพที่9' width='940'/></a>           
<a href=''><img alt='' class='slide' height='262' id='slide-img-10' src='ใส่ URL ภาพที่10' width='940'/></a> 

และ

{"id":"slide-img-8","client":"ใส่ Title","desc":"ใส่คำอธิบาย"},          
{"id":"slide-img-9","client":"ใส่ Title","desc":"ใส่คำอธิบาย"},
{"id":"slide-img-10","client":"ใส่ Title","desc":"ใส่คำอธิบาย"}

โดยเพิ่มเข้าไปในโค้ดชุดเดิมในข้อ 3.3 ซึ่งจะได้โค้ดใหม่เป็น

<div id='HackublogSlider'>     
<div class='wrap1'> 
<div id='slide-holder'>     
<div id='slide-runner'>      
    <a href=''><img alt='' class='slide' height='262' id='slide-img-1' src='http://upic.me/i/s4/naturephoto.png' width='940'/></a>       
    <a href=''><img alt='' class='slide' height='262' id='slide-img-2' src='http://upic.me/i/yt/naturephoto1.png' width='940'/></a>        
    <a href=''><img alt='' class='slide' height='262' id='slide-img-3' src='http://upic.me/i/33/naturephoto2.png' width='940'/></a>        
    <a href=''><img alt='' class='slide' height='262' id='slide-img-4' src='http://upic.me/i/pt/naturephoto3.png' width='940'/></a>        
    <a href=''><img alt='' class='slide' height='262' id='slide-img-5' src='http://upic.me/i/hm/naturephoto4.png' width='940'/></a>        
    <a href=''><img alt='' class='slide' height='262' id='slide-img-6' src='http://upic.me/i/s9/naturephoto5.png' width='940'/></a>        
    <a href=''><img alt='' class='slide' height='262' id='slide-img-7' src='http://upic.me/i/yo/naturephoto6.png' width='940'/></a>        
    <a href=''><img alt='' class='slide' height='262' id='slide-img-8' src='http://upic.me/i/hm/naturephoto4.png' width='940'/></a>        
    <a href=''><img alt='' class='slide' height='262' id='slide-img-9' src='http://upic.me/i/pt/naturephoto3.png' width='940'/></a>        
    <a href=''><img alt='' class='slide' height='262' id='slide-img-10' src='http://upic.me/i/yt/naturephoto1.png' width='940'/></a>        
    <div id='slide-controls'>      
     <p class='text' id='slide-client'><strong>post: </strong><span/></p>      
     <p class='text' id='slide-desc'/>      
     <p id='slide-nav'/>      
     </div>      
</div>      
</div>
  
    <div id='slide-controls'>       
     <p class='text' id='slide-client'><strong>post: </strong><span/></p>       
     <p class='text' id='slide-desc'/>       
     <p id='slide-nav'/>       
     </div>       
</div>       
</div> 
<script type='text/javascript'>     
if(!window.slider) var slider={};      
slider.data=[      
{"id":"slide-img-1","client":"nature beauty","desc":"nature beauty photography"},       
{"id":"slide-img-2","client":"nature beauty","desc":"add your description here"},        
{"id":"slide-img-3","client":"nature beauty","desc":"add your description here"},        
{"id":"slide-img-4","client":"nature beauty","desc":"add your description here"},        
{"id":"slide-img-5","client":"nature beauty","desc":"add your description here"},        
{"id":"slide-img-6","client":"nature beauty","desc":"add your description here"},        
{"id":"slide-img-7","client":"nature beauty","desc":"add your description here"},
{"id":"slide-img-8","client":"nature beauty","desc":"nature beauty photography"},       
{"id":"slide-img-9","client":"nature beauty","desc":"add your description here"},        
{"id":"slide-img-10","client":"nature beauty","desc":"add your description here"}
];     
</script>
</div></div><!--/HackublogSlider-->

แต่งบล็อกให้สวยด้วย Templates ที่โหลดจากอินเตอร์เน็ต

  แต่งบล็อกให้สวยด้วย Templates ที่โหลดจากอินเตอร์เน็ต

  เว็บโหลด Templates
 คลิก theme+blogger
  วิธีโหลดแม่แบบธีม

1.   (1) เลือกสีที่ชอบ         (2) เลือกแบบแนวที่ชอบ   สามารถคลิกดูแม่แบบได้ก่อนดาวโหลด    ทำการดาวโหลดแม่แบบไว้ในตัวเครื่อง

   2. ทำการแตกไฟล์ที่โหลดมาที่เซฟไว้ในเคื่อง ทำการคลิกขวาที่ไฟล์ แล้วมาที่ Extract Here ตามรูปด้านล่าง

3. เสร็จแล้วเข้ามาที่หน้าแก้ไขเว็บบล็อกของเราตามรูป  แล้วไปที่แม่แบบตามรูปด้านล่าง

4.คลิกที่ สำรอง/กู้คืน 

5. คลิกที่ดาวโหลดเทมเพลดแบบเต็ม  (เพื่อสำรองแม่แบบเดิมของเราไว้ในเครื่อง)

6.คลิกที่ choose file เพื่ออัพแม่แบบของเราที่แตกไฟล์ไว้ในขั้นตอนที่ 2

7.เข้าไปโฟนเดอร์ที่ไฟล์ที่เราทำการแตกไฟล์ไว้เรียบร้อยแล้ว เลือกที่ไฟล์ที่มีรูปร่างลักษณะเหมือนรูปด้านล่างแล้วคลิก open

9.คลิกที่อัปโหลด

10.เสร็จแล้วคลิกที่ ดูบล็อกเพื่อดูหน้าเว็บบล็อกของเราในแม่แบบที่อัปลง

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

AppServ

       AppServ

           AppServ คือ ชุดโปรแกรมในลักษณะของWAMP ในการสร้างเว็บเซิร์ฟเวอร์สำเร็จรูปบนระบบปฏิบัติการไมโครซอฟท์ วินโดวส์ สร้างโดยชาวไทย จัดทำขึ้นโดย ภาณุพงศ์ ปัญญาดี เป็นการรวมโปรแกรมจำนวน 4 ตัวในการสร้างเว็บเซิร์ฟเวอร์ ได้แก่ Apache HTTP Server, PHP, MySQL, และ phpMyAdmin เวอร์ชันปัจจุบันได้แก่ 2.4.9 (สำหรับ PHP 4) และ 2.5.10 (สำหรับ PHP 5) เนื่องจากภาณุพงศ์ ปัญญาดี ต้องตอบคำถามวิธีการติดตั้ง Apache, PHP, และ MySQL ให้ใช้งานด้วยกันได้บ่อยครั้ง จึงริเริ่มพัฒนาชุดติดตั้ง AppServ ที่ติดตั้งและใช้งานได้ทันทีในประมาณปี พ.ศ. 2543 (ค.ศ. 2000) และพัฒนาต่อเนื่องเรื่อยมาเตรียมโปรแกรมเพื่อติดตั้ง       ดาวน์โหลดโปรแกรม AppServ จากเว็บไซต์ http://www.appservnetwork.com โดยเลือกเวอร์ชั่นที่ต้องการติดตั้งระหว่างเวอร์ชั่น 2.4.x และ 2.5.xโดยความแตกต่างของ 2 เวอร์ชั่นนี้คือ2.4.x คือเวอร์ชั่นที่นำ Package ที่มีความเสถียรเป็นหลัก เหมาะสำหรับผู้ที่ต้องการความมั่นคงของระบบ โดยไม่ได้มุ่งเน้นที่จะใช้ฟังก์ชั่นใหม่  2.5.x คือเวอร์ชั่นที่นำ Package ใหม่ๆ นำมาใช้งานโดยเฉพาะ เหมาะสำหรับนักพัฒนาที่ต้องการระบบใหม่ๆ  หรือต้องการทดสอบ ทดลองใช้งานฟังก์ชั่นใหม่ ซึ่งอาจจะไม่ได้ความเสถียรของระบบได้ 100% เนื่องจากว่า Package จากนักพัฒนานั้น ยังอยู่ในช่วงของขั้นทดสอบ ทดลองเพื่อหาข้อผิดพลาดอยู่ขั้นตอนการติดตั้ง AppServ 1. ดับเบิ้ลคลิกไฟล์ appserv-win32-x.x.x.exe เพื่อทำการติดตั้ง จะปรากฏหน้าจอตามรูปที่ 1

                                                       รูปที่ 1 ขั้นตอนการติดตั้งโปรแกรม AppServ


       2. เข้าสู่ขั้นตอนเงื่อนไขการใช้งานโปรแกรม โดยโปรแกรม AppServ ได้แจกจ่ายในรูปแบบ GNU License หากผู้ติดตั้ง   อ่านเงื่อนไขต่างๆ เสร็จสิ้นแล้ว หากยอมรับเงื่อนไขให้กด Next เพื่อเข้าสู่การติดตั้งในขั้นต่อไป แต่หากว่าไม่ยอมรับเงื่อนไข   ให้กด Cancel เพื่อออกจากการติดตั้งโปรแกรม AppServ ดังรูปตัวอย่างที่ 2                                                     รูปที่ 2 แสดงรายละเอียดเงื่อนไขการ GNU License

       3. เข้าสู่ขั้นตอนการเลือกปลายทางที่ต้องการติดตั้ง โดยค่าเริ่มต้นปลายทางที่ติดตั้งจะเป็น C:AppServ หากต้องการเปลี่ยนปลายทางที่ติดตั้ง ให้กด Browse แล้วเลือกปลายทางที่ต้องการ ตามรูปที่ 3 เมื่อเลือกปลายทางเสร็จสิ้น ให้กดปุ่ม Next เพื่อเข้าสู่ขั้นตอนการติดตั้งขั้นต่อไป                                                       รูปที่ 3 เลือกปลายทางการติดตั้งโปรแกรม AppServ

       4. เลือก Package Components ที่ต้องการติดตั้ง โดยค่าเริ่มต้นนั้นจะให้เลือกลงทุก Package แต่หากว่าผู้ใช้งาน ต้องการเลือกลงเฉพาะบาง Package ก็สามารถเลือกตามข้อที่ต้องการออก โดยรายละเอียดแต่ละ Package มีดังนี้  Apache HTTP Server คือ โปรแกรมที่ทำหน้าเป็น Web Server  - MySQL Database คือ โปรแกรมที่ทำหน้าเป็น Database Server  - PHP Hypertext Preprocessor คือ โปรแกรมที่ทำหน้าประมวลผลการทำงานของภาษา PHP  - phpMyAdmin คือ โปรแกรมที่ใช้ในการบริหารจัดการฐานข้อมูล MySQL ผ่านเว็บไซต์   เมื่อทำการเลือก Package ตามรูปที่ 4 เรียบร้อยแล้ว ให้กด Next เพื่อเข้าสู่ขั้นตอนการติดตั้งต่อไป                                                  รูปที่ 4 เลือก Package Components ที่ต้องการติดตั้ง

       5. กำหนดค่าคอนฟิกของ Apache Web Server มีอยู่ด้วยกันทั้งหมด 3 ส่วน ตามรูปที่ 5 คือ Server Name   คือช่องสำหรับป้อนข้อมูลชื่อ Web Server ของท่าoเช่น www.appservnetwork.com Admin Email    คือช่องสำหรับป้อนข้อมูล อีเมล์ผู้ดูแลระบบ เช่น root@appservnetwork.com   HTTP Port  คือช่องสำหรับระบุ Port ที่จะเรียกใช้งาน Apache Web Server โดยทั่วไปแล้ว Protocol    HTTP นั้นจะมีค่าหลักคือ 80 หากว่าท่านต้องการหลีกเลี่ยงการใช้ Port 80 ก็สามารถแก้ไขได้ หากมีการเปลี่ยนแปลง Port การเข้าใช้งาน Web Server แล้ว ทุกครั้งที่เรียกใช้งานเว็บไซต์ จำเป็นที่ต้องระบุหมายเลข Port ด้วย เช่น หากเลือกใช้ Port 99 ในการเข้าเว็บไซต์ทุกครั้งต้องใช้      http://www.appservnetwork.com:99 จึงจะสามารถเข้าใช้งานได้                                                  รูปที่ 5 แสดงการกำหนดค่าคอนฟิกค่า Apache Web Server

       6. กำหนดค่าคอนฟิกของ MySQL Database มีอยู่ด้วยกันทั้งหมด 3 ส่วน ตามรูปที่ 6 คือ    Root Password คือช่องสำหรับป้อน รหัสผ่านการเข้าใช้งานฐานข้อมูลของ Root หรือผู้ดูแลระบบ ทุกครั้งที่เข้าใช้งานฐานข้อมูลในลักษณะที่เป็นผู้ดูแลระบบ ให้ระบุ user คือ root  Character Sets   ใช้ในการกำหนดค่าระบบภาษาที่ใช้ในการจัดเก็บฐานข้อมูล, เรียงลำดับฐานข้อมูล, Import ฐานข้อมูล, Export ฐานข้อมูล, ติดต่อฐานข้อมูล Old Password        หากท่านมีปัญหาเกี่ยวกับการใช้งาน PHP กับ MySQL API เวอร์ชั่นเก่าโดยเจอ Error Client does not support authentication protocol requested by server;consider upgrading MySQL client ให้เลือกในส่วนของ Old Password เพื่อหลีกเลี่ยงปัญหานี้ Enable InnoDB     หากท่านต้องการใช้งานฐานข้อมูลในรูปแบบ InnoDB ให้เลือกในส่วนนี้ด้วย                                                  รูปที่ 6 แสดงการกำหนดค่าคอนฟิกของ MySQL Database
       7. สิ้นสุดขั้นตอนการติดตั้งโปรแกรม AppServ สำหรับขั้นตอนสุดท้ายนี้จะมีให้เลือกว่าต้องการสั่งให้มีการรัน Apache และ MySQLทันทีหรือไม่ จากนั้นกดปุ่ม Finish เพื่อเสร็จสิ้นการติดตั้งโปรแกรม AppServ                                                 รูปที่ 7 แสดงหน้าจอขั้นตอนสิ้นสุดการติดตั้งโปรแกรม AppServ

เกี่ยวกับฉัน

สวัสดีครับ :)  ผมชื่อ ด.ช.ศิรชัช เชาวนะปัญจะ ชื่อเล่นหมอก

อายุ 13 ปี เกิดวันที่ 13 / 7 / 2543     

Facebook  ชื่อ  Mok chaovanapunja

ID  Iine  ชื่อ  mok2543  อาหารที่ชอบ ปลาสามรส                 

งานอดิเรก  ชอบดูการ์ตูน อ่านหนังสือ วาดรูป

    
 ผลงานดีเด่น วาดภาพประกอบ และ 

แต่งเรื่องลงในคอลัมน์โรงเรียนนัก

เขียนน้อย นสพ.กรุงเทพธุรกิจ ###

ปัจจุบันกำหนังศึกษาอยู่ชั้นมัธยม

ศึกษาปีที่ 1 โรงเรียน ศรียาภัย

 อนาคตจะประกอบอาชีพ สถาปัต 

วิศวกร ที่อยู่่ 180/1 หมุ่  7 ตำบล นาร์โพธิ์ อำเภอ สวี จังหวัด ชุมพร

หนังที่ชอบ  the hunger games catching fire Anime ที่ชอบ คุโรโกะ โนะ บาสเก็ตบอล  นารูโตะ

Fairytail และ  Earl and fairy IG MOK_555