A Little Man In The Big City

วันนี้ประสบปัญหาจากการตัด string จากฟังชั่น substr() แล้วตัวสุดท้ายเป็นภาษาต่างดาวซะงั้น
เลยถามพี่กู(เกิ้ล) อีกแล้ว ได้ความว่า ถ้าใช้กับ encoding ที่เป็น tis-620 ไม่มีปัญหา แต่จะมีัปัญหากับ utf-8
ได้วิธีแก้มาดังนี้

ให้ใช้ iconv_substr() แทน เพราะสามารถระบุึ encoding ของ output ได้ด้วย

ตัวอย่าง : iconv_substr($text, 0, 30, “UTF-8″);

โดย parameter ตัวสุดท้ายจะเป็น Character encoding ครับ

เอาไปลองกันดูนะค้าบบบ 

ที่มา http://dexterian.exteen.com/20080726/string

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

พอเจอสคริปที่ต้องการแล้ว แต่…. มันยังมีปัญหา ว่าจะทำยังไงให้ดึงฐานข้อมูลมาใช้ ก้เลย มั่วๆไป บวกกับ ไม่ค่อยถนัด java script ด้วย ดูๆแล้วอาจจะ งงๆ บ้างนะคับ ^^

เริ่มจากไปเอาสคริปมา จาก http://www.dynamicdrive.com/dynamicindex14/flexislide.htm

แล้วก็มายำๆๆ

ได้แบบนี้ครับ

<? //ดึงข้อมูลออกมาก่อน ดดยเก็บไว้ใน  array
       include “connect.php”;
                          $sql_new=”select * from tb_products where new=’yes’ order by no desc limit 6″;
        $dbquery_new=mysql_db_query($dbname,$sql_new);
        $num_rows=mysql_num_rows($dbquery_new);
        while($res=mysql_fetch_array($dbquery_new))
        {
        $gid[]=$res[group_id];
        $tid[]=$res[type_id];
        $bid[]=$res[brand_id];
        $no[]=$res[no];
        $oska_model[]=$res[oska_model];
        $picture[]=$res[picture];
        $price_retail[]=$res[price_retail];
       
        $sql_br=”select brand_name from brand where brand_id=’$res[brand_id]‘”;
        $query_br=mysql_db_query($dbname,$sql_br);
        $res_br=mysql_fetch_array($query_br);
        $brand_name[]=$res_br[brand_name];
       
        $sql_tp=”select group_name from product_group where group_id=’$res[group_id]‘”;
        $query_tp=mysql_db_query($dbname,$sql_tp);
        $res_tp=mysql_fetch_array($query_tp);
        $group_name[]=$res_tp[group_name];
        }
      ?>
<script language=”JavaScript1.2″>

/***********************************************
* Flexi Slideshow- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var variableslide=new Array()

//variableslide[x]=["path to image", "OPTIONAL link for image", "OPTIONAL text description (supports HTML tags)"] ตรงนี้เนื่องจากผมไม่ค่อยถนัด java script เลยทำให้มันรันอัตโนมัติไมได้
variableslide[0]=['show_image.php?filename=products_image/<?=$picture[0]?>&width=200′
, ‘product_detail.php?gid=<?=$gid[0]?>&tid=<?=$tid[0]?>&bid=<?=$bid[0]?>&no=<?=$no[0]?>&new_p=1′
, ‘<img src=images/bullet_red.gif border=0 > <?=$group_name[0]?>’
, ‘<br><img src=images/bullet_red.gif border=0 > <?=$brand_name[0]?>’
, ‘<br><img src=images/bullet_red.gif border=0 > <?=$oska_model[0]?>’
, ‘<br><br><a href=\”product_detail.php?gid=<?=$gid[0]?>&tid=<?=$tid[0]?>&bid=<?=$bid[0]?>&no=<?=$no[0]?>&new_p=1\”><img src=images/props.gif border=0 alt=คลิกเพื่อดูรายละเอียด ></a> <strong>Price</strong><span class=\”warning\”><?=$price_retail[0]?> </span><strong>Baht </strong>’]
variableslide[1]=['show_image.php?filename=products_image/<?=$picture[1]?>&width=200′
, ‘product_detail.php?gid=<?=$gid[1]?>&tid=<?=$tid[1]?>&bid=<?=$bid[1]?>&no=<?=$no[1]?>&new_p=1′
, ‘<img src=images/bullet_red.gif border=0 > <?=$group_name[1]?>’
, ‘<br><img src=images/bullet_red.gif border=0 > <?=$brand_name[1]?>’
, ‘<br><img src=images/bullet_red.gif border=0 > <?=$oska_model[1]?>’
, ‘<br><br><a href=\”product_detail.php?gid=<?=$gid[1]?>&tid=<?=$tid[1]?>&bid=<?=$bid[1]?>&no=<?=$no[1]?>&new_p=1\”><img src=images/props.gif border=0 alt=คลิกเพื่อดูรายละเอียด ></a> <strong>Price</strong><span class=\”warning\”><?=$price_retail[1]?> </span><strong>Baht </strong>’]
variableslide[2]=['show_image.php?filename=products_image/<?=$picture[2]?>&width=200′
, ‘product_detail.php?gid=<?=$gid[2]?>&tid=<?=$tid[2]?>&bid=<?=$bid[2]?>&no=<?=$no[2]?>&new_p=1′
, ‘<img src=images/bullet_red.gif border=0 > <?=$group_name[2]?>’
, ‘<br><img src=images/bullet_red.gif border=0 > <?=$brand_name[2]?>’
, ‘<br><img src=images/bullet_red.gif border=0 > <?=$oska_model[2]?>’
, ‘<br><br><a href=\”product_detail.php?gid=<?=$gid[2]?>&tid=<?=$tid[2]?>&bid=<?=$bid[2]?>&no=<?=$no[2]?>&new_p=1\”><img src=images/props.gif border=0 alt=คลิกเพื่อดูรายละเอียด ></a> <strong>Price</strong><span class=\”warning\”><?=$price_retail[2]?> </span><strong>Baht </strong>’]
variableslide[3]=['show_image.php?filename=products_image/<?=$picture[3]?>&width=200′
, ‘product_detail.php?gid=<?=$gid[3]?>&tid=<?=$tid[3]?>&bid=<?=$bid[3]?>&no=<?=$no[3]?>&new_p=1′
, ‘<img src=images/bullet_red.gif border=0 > <?=$group_name[3]?>’
, ‘<br><img src=images/bullet_red.gif border=0 > <?=$brand_name[3]?>’
, ‘<br><img src=images/bullet_red.gif border=0 > <?=$oska_model[3]?>’
, ‘<br><br><a href=\”product_detail.php?gid=<?=$gid[3]?>&tid=<?=$tid[3]?>&bid=<?=$bid[3]?>&no=<?=$no[3]?>&new_p=1\”><img src=images/props.gif border=0 alt=คลิกเพื่อดูรายละเอียด ></a> <strong>Price</strong><span class=\”warning\”><?=$price_retail[3]?> </span><strong>Baht </strong>’]
variableslide[4]=['show_image.php?filename=products_image/<?=$picture[4]?>&width=200′
, ‘product_detail.php?gid=<?=$gid[4]?>&tid=<?=$tid[4]?>&bid=<?=$bid[4]?>&no=<?=$no[4]?>&new_p=1′
, ‘<img src=images/bullet_red.gif border=0 > <?=$group_name[4]?>’
, ‘<br><img src=images/bullet_red.gif border=0 > <?=$brand_name[4]?>’
, ‘<br><img src=images/bullet_red.gif border=0 > <?=$oska_model[4]?>’
, ‘<br><br><a href=\”product_detail.php?gid=<?=$gid[4]?>&tid=<?=$tid[4]?>&bid=<?=$bid[4]?>&no=<?=$no[4]?>&new_p=1\”><img src=images/props.gif border=0 alt=คลิกเพื่อดูรายละเอียด ></a> <strong>Price</strong><span class=\”warning\”><?=$price_retail[4]?> </span><strong>Baht </strong>’]
variableslide[5]=['show_image.php?filename=products_image/<?=$picture[5]?>&width=200′
, ‘product_detail.php?gid=<?=$gid[5]?>&tid=<?=$tid[5]?>&bid=<?=$bid[5]?>&no=<?=$no[5]?>&new_p=1′
, ‘<img src=images/bullet_red.gif border=0 > <?=$group_name[5]?>’
, ‘<br><img src=images/bullet_red.gif border=0 > <?=$brand_name[5]?>’
, ‘<br><img src=images/bullet_red.gif border=0 > <?=$oska_model[5]?>’
, ‘<br><br><a href=\”product_detail.php?gid=<?=$gid[5]?>&tid=<?=$tid[5]?>&bid=<?=$bid[5]?>&no=<?=$no[5]?>&new_p=1\”><img src=images/props.gif border=0 alt=คลิกเพื่อดูรายละเอียด ></a> <strong>Price</strong><span class=\”warning\”><?=$price_retail[5]?> </span><strong>Baht </strong>’]

//configure the below 3 variables to set the dimension/background color of the slideshow

var slidewidth=’500px’ //set to width of LARGEST image in your slideshow
var slideheight=’160px’ //set to height of LARGEST iamge in your slideshow, plus any text description
var slidebgcolor=’#F3F3F3′

//configure the below variable to determine the delay between image rotations (in miliseconds)
var slidedelay=4000

////Do not edit pass this line////////////////

var ie=document.all
var dom=document.getElementById

for (i=0;i<variableslide.length;i++){
var cacheimage=new Image()
cacheimage.src=variableslide[i][0]
}

var currentslide=0

//ส่วนนี้ไว้จัดการแสดงผลครับ

function rotateimages(){
contentcontainer=’<left>’
if (variableslide[currentslide][1]!=”")
contentcontainer+=’<a href=”‘+variableslide[currentslide][1]+’”>’
contentcontainer+=’<img src=”‘+variableslide[currentslide][0]+’” border=”0″ vspace=”3″ hspace=”10″ align=”left” alt=”คลิกเพื่อดูรายละเอียด” >’
if (variableslide[currentslide][1]!=”")
contentcontainer+=’</left>’
contentcontainer+=’</a>’
if (variableslide[currentslide][2]!=”")
contentcontainer+=variableslide[currentslide][2]
if (variableslide[currentslide][3]!=”")
contentcontainer+=variableslide[currentslide][3]
if (variableslide[currentslide][4]!=”")
contentcontainer+=variableslide[currentslide][4]
if (variableslide[currentslide][5]!=”")
contentcontainer+=variableslide[currentslide][5]
if (document.layers){
crossrotateobj.document.write(contentcontainer)
crossrotateobj.document.close()
}
else if (ie||dom)
crossrotateobj.innerHTML=contentcontainer
if (currentslide==variableslide.length-1) currentslide=0
else currentslide++
setTimeout(”rotateimages()”,slidedelay)
}

if (ie||dom)
document.write(’<div id=”slidedom” style=”width:’+slidewidth+’;height:’+slideheight+’; background-color:’+slidebgcolor+’”></div>’)

function start_slider(){
crossrotateobj=dom? document.getElementById(”slidedom”) : ie? document.all.slidedom : document.slidensmain.document.slidenssub
if (document.layers)
document.slidensmain.visibility=”show”
rotateimages()
}

if (ie||dom)
start_slider()
else if (document.layers)
window.onload=start_slider

</script>     

ดูตัวอย่างได้ที่  http://www.oskabatt.com/web/index.php

วันก่อน ได้เขียน สคริป login โดยเอาสคริปมาจาก http://www.goragod.com/

เอามาดัดแปลง อีกหน่อยนึง เพื่อที่จะให้เป็นอย่างที่ผมต้องการได้

——————————–

<?  
 $action=$_POST[action];
 $user=$_POST[user];
  $passwd=$_POST[passwd];
   
if (isset($user) && isset($passwd) && $action==”login”)//ตรวจสอบชื่อกับฐานข้อมูล
{
    $host=”localhost”;
          $username=”root”;
          $password=”1234″;
          $dbname=”batt2home”;
          $tablename=”tb_admin”;
         
           //เรียกข้อมูล - Member -
          $db = mysql_connect($host,$username,$password) or die (”ไม่สามารถติดต่อกับฐานข้อมูลได้ในขณะนี้”);
          $sql = “select * from $tablename where admin = ‘$user’ AND adminpass = ‘$passwd’”;
          $query = mysql_db_query($dbname,$sql) or die (”ไม่สามารถเรียกฐานข้อมูลสมาชิกได้ในขณะนี้”);
          $fetch = mysql_fetch_array($query);
          $num = mysql_num_rows($query);
          mysql_close($db);  
 
 if ($num>=1) ////login สำเร็จ  ให้set cookie หรือจะใช้ session ก็ได้
 {
 setcookie(”action”,”login”);
 setcookie(”user”,”$user”,time()+3600);
 setcookie(”passwd”,”$passwd”,time()+3600);
 }
  
       else {
                //ชื่อหรือ รหัสผ่านไม่ถูกต้อง
               $message=”<font color=red size=1>ชื่อ หรือ รหัสผ่าน ไม่ถูกต้อง</font>”;
               unset($user);
          }
     }
 
else if (isset($action) && $action==’logout’) //ออกจากระบบ
{
 
   setcookie(”user”,”");
   setcookie(”passwd”,”");
 $message=”<font color=green >ออกจากระบบเรียบร้อย</font><br />”;
}
<html> 
<body>

 echo”
                    <table cellspacing=5 cellpadding=0 width=200 bgcolor=#CCCCCC>”; ?>
                    <form method=post action=”" name=login_form onSubmit=”return check_login()”>
                    <?
     if (isset($user) && $action==”login”)// แสดงข้อความต้อนรับ
     {
    echo”<tr><td colspan=2 align=center><font color=#666666 >ยินดีต้อนรับ คุณ <font color=green>$user </font> เข้าระบบ</font></td></tr>”;
                echo”<tr><td align=right colspan=2><input type=submit name=action  value=logout class=red title=\”สมาชิก เข้าระบบ\”></td></tr>”;
     }
       else// แสดงฟอร์ม login
       {
                     if (isset($message))
     
      echo”<tr><td colspan=2 align=center>$message</font></td></tr>”;
     
      else
     
    echo”<tr><td colspan=2 align=center><font  color=#666666>กรุณาเข้าระบบ</font></td></tr>”;
                echo”<tr><td align=right><font color=#555555 >user : </font></td><td><input size=15 type=text name=user maxlength=15 class=red></td></tr>”;
                echo”<tr><td align=right><font color=#555555 >passwd : </font></td><td><input size=15 type=password name=passwd maxlength=15  class=red></td></tr>”;
                    echo”<tr><td align=right colspan=2><input type=submit name=action  value=login class=red title=\”สมาชิก เข้าระบบ\”></td></tr>”;
     
     }?>
                    </form>              
                   <? echo” </table>”; //End login ?>
 ?>

</body>
</html> 

<script language=JavaScript>
function check_login()
{
     var v1 = document.login_form.user.value;
     var v2 = document.login_form.passwd.value;

     if (v1.length==0) {
          alert(’กรุณาป้อน Username ก่อน’);
          document.login_form.user.focus();          
          return false;
     } else if (v2.length==0) {
           alert(’กรุณาป้อน Password ก่อน’) ;
           document.login_form.passwd.focus();          
           return false;
     } else
          return true;
}
</script>

วันนี้ได้ลองทำ Slashdot Menu ดูครับ น่าสนุกเลยทีเดียว สำหรับเมนูนี้

ตัวอย่าง  อยากได้ code ก็ โหลดจากหน้านั้นได้เลยครับ หรือ  sdmenu.zip

สามารถเปลี่ยนแปลงค่าได้ โดยเปลี่ยนตามนี้ครับ

var myMenu = new SDMenu(”main_menu”); // ID of the menu element
// Default values…
myMenu.speed = 3;                     // Menu sliding speed (1 - 5 recomended)
myMenu.remember = true;               // Store menu states (expanded or collapsed) in cookie and restore later
myMenu.oneSmOnly = false;             // One expanded submenu at a time
myMenu.markCurrent = true;            // Mark current link / page (link.href == location.href)

myMenu.init();

// Additional methods…
var firstSubmenu = myMenu.submenus[0];
myMenu.expandMenu(firstSubmenu);      // Expand a submenu
myMenu.collapseMenu(firstSubmenu);    // Collapse a menu
myMenu.toggleMenu(firstSubmenu);      // Expand if collapsed and collapse if expanded

myMenu.expandAll();                   // Expand all submenus
myMenu.collapseAll();                 // Collapse all submenus

เวลาเรียกใช้ก็แบบนี้ครับ

<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”sdmenu/sdmenu.css” />
<script type=”text/javascript” src=”sdmenu/sdmenu.js“>
/***********************************************
* Slashdot Menu script- By DimX
* Submitted to Dynamic Drive DHTML code library: http://www.dynamicdrive.com
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
<script type=”text/javascript”>
// <![CDATA[
var myMenu;
window.onload = function() {
myMenu = new SDMenu("my_menu");
myMenu.init();
};
// ]]>
</script>
</head>

<body>

<div id=”my_menu” class=”sdmenu”>
<div>
<span>Online Tools</span>
<a href=”http://tools.dynamicdrive.com/imageoptimizer/”>Image Optimizer</a>
<a href=”http://tools.dynamicdrive.com/favicon/”>FavIcon Generator</a>
<a href=”http://www.dynamicdrive.com/emailriddler/”>Email Riddler</a>
<a href=”http://tools.dynamicdrive.com/password/”>htaccess Password</a>
<a href=”http://tools.dynamicdrive.com/gradient/”>Gradient Image</a>
<a href=”http://tools.dynamicdrive.com/button/”>Button Maker</a>
</div>
<div>
<span>Support Us</span>
<a href=”http://www.dynamicdrive.com/recommendit/”>Recommend Us</a>
<a href=”http://www.dynamicdrive.com/link.htm”>Link to Us</a>
<a href=”http://www.dynamicdrive.com/resources/”>Web Resources</a>
</div>
<div class=”collapsed”>
<span>Partners</span>
<a href=”http://www.javascriptkit.com”>JavaScript Kit</a>
<a href=”http://www.cssdrive.com”>CSS Drive</a>
<a href=”http://www.codingforums.com”>CodingForums</a>
<a href=”http://www.dynamicdrive.com/style/”>CSS Examples</a>
</div>
<div>
<span>Test Current</span>
<a href=”?foo=bar”>Current or not</a>
<a href=”./”>Current or not</a>
<a href=”index.html”>Current or not</a>
<a href=”index.html?query”>Current or not</a>
</div>
</div>

</body>
</html>

credit : http://www.dynamicdrive.com/dynamicindex1/slashdot.htm

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

มาเริ่มที่สคริปกันเลย
<style type=”text/css”>

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */

}

</style>
แล้วตอนเรียกใช้

<a class=”thumbnail” href=”#thumb”><img src=”show_image.php?filename=products_image/<? echo”$r_batt[picture]“; ?>&width=200&height=150″ border=”0″ /><span><img src=”show_image.php?filename=products_image/<? echo”$r_batt[picture]“; ?>” /><br />
   <? echo”$r_batt[oska_model]“; ?></span></a>

แค่นี้เองครับ แล้วสามารถปรับแต่ง ที่ CSS ได้ด้วย

วันนี้ จะเอารูปมาย่อก่อน แล้วเวลาคลิกรูป ค่อยขึ้นรูปเต็มๆ
แต่เจอปัญหา ตรงที่รูปที่เราย่อ มันจะแตก ไม่สวย เลยลองเซิจ เรื่อยๆ มาเจอ blog นี้
ของเขาดีมากครับ ทำเป็น Thumbnail รูปเลยไม่แตก
วิธีใช้ก็ไม่ยากครับ
ขั้นแรกต้องโหลด
1.  Both PHP 5 & 4 Versions  <<สำหรับทั้ง 2 Version
2.  Download PHP 4 v2.0    << สำหรับ PHP 4
3.  Download PHP 5 v2.0    << สำหรับ PHP 5

แล้วเมื่อโหลดมาเราจะได้

อันนี้ผมใช้ PHP 5นะครับ

ไฟล์ที่จะใช้คือ
show_image.php
thumbnail.inc.php

เอาไปวาง เวลาเรียกใช้ต้องเรียกให้ตรง path ด้วยนะครับ

อย่างของผม จะเรียกใช้จาก ฐานจากข้อมูลก็

$sql_batt=”select * from tb_products where product_model=’$_GET[model]‘ AND brand_id=’$_GET[bid]‘ AND type_id=’$_GET[tid]‘ order by product_model asc”;
         $res_batt=mysql_db_query($dbname,$sql_batt);
         $num_batt=mysql_num_rows($res_batt);
         $i=0;
         while($i<$num_batt)
         {
         $r_batt=mysql_fetch_array($res_batt);
                               
                                if($r_batt[picture]==”")
        { ?>
                                <img src=”products_image/imagenot.jpg” width=”200″ height=”150″ />
                                <? }
        else
        { ?>
        <img src=”show_image.php?filename=products_image/<? echo”$r_batt[picture]“; ?>&width=200&height=150″ /> <? }  } ?>

หรือ จะมีวิธีการใช้แบบอื่นอีก เข้าไปดูได้ที่นี่ ครับ http://www.gen-x-design.com/projects/php-thumbnailer-class/

You can drag the Slideflow using your mouse, or click anywhere in the stack to jump there. Click inside the frame in order to enable mouse wheel and arrow key navigation! Or better yet.
Technical background: The photos and titles are read from an XML file, and the thumbnails are pre-generated using Photoshop actions

http://mediaeventservices.com/blog/2007/11/15/
ajax-image-gallery-powered-by-slideflow-like-cover-flow/

credit : http://www.cgitop.com/2008/04/02/ajax-image-gallery-powered-by-slideflow-like-cover-flow.html 

ยังไม่ค่อยเข้าใจอะไรกับ blog เท่าไรครับ ไว้จะลองเล่นๆดู