วันอังคารที่ 5 สิงหาคม พ.ศ. 2557

การใส่คลิปวีดีโอใน HTML5

ทั่วไปการใส่คลิปวีดีโอในเว็บ หรือไฟล์หนังทั่วไปในเว็บไซต์นั้น ต้องใช้ปลักอินช่วยเสมอๆ เช่น adobe flash player หรือไม่ก็ shockwave ฯลฯ เยอะแยะไม่หวาดไม่ไหว แต่ถ้าเป็น HTML5 นั้น เพียงไม่กี่บรรทัดคุณก็สามารถมีวีดีโอส่วนตัวมาไว้ในเว็บไซต์ได้แล้วละครับ



HTML5 นั้นใช้ tag <video>

บราวเซอร์ที่รองรับมี
Internet Explorer 9+
Firefox
Opera
Chrome
and Safari
จะเห็นได้ว่ามีบราวเซอร์รองรับมากมายครับ เลยทำให้คำสั่งนี้น่าใช้ฝุดๆ


ตัวอย่างโค๊ดเล่นไฟล์หนัง โดยใช้แท็ก <video>

<video width="640" height="450" controls>
  <source src="movie1.mp4" type="video/mp4">
<source src="movie1.ogg" type="video/ogg">
  Your browser does not support the video tag.

</video>

ตรง your browser does not support the video tag. จะใส่ text ว่าอะไรก็ได้ จะแสดงก็ต่อเมื่อไม่สามารถเปิดไฟล์วีดีโอนั้นได้ และเราสามารถปรับความกว้างความสูงของ การแสดงผลได้โดยการเปลี่ยนเลข width height ได้เช่นเคย
และบรรทัดที่เป็นไฟล์ ogg จะได้ใช้ก็ต่อเมื่อเปิด mp4 ไมไ่ด้ครับ 

ดูง่ายๆ คือมันจะไล่บรรทัดไปเรื่อยๆ จนกว่าจะได้แสดงผลครับ
ตอนนี้มีไฟล์วีดีโอ 3 นามสกุลที่ใช้ได้ครับคือ .mp4 .ogg .WebM

เดี๋ยวต่อไปจะบอกลูกเล่นอื่นๆนะครับ

วันศุกร์ที่ 30 พฤษภาคม พ.ศ. 2557

HTML5 กับการใช้ form ที่เพิ่มขึ้นมา

สำหรับ form ใน html5 นั้นมีเพิ่มใหม่มาบางคำสั่งเท่านั้นครับ 
ซึ่งข้อเสียเพียงอย่างเดียวของมันคือ ตอนนี้มันยังไม่ได้รับรองทุก Browser ครับ 
แต่คิดว่าต่อไปก็น่าจะเป็นมาตรฐานให้ทุก browser ต้องมีกัน ... ก็ว่ากันไป แบ่งเป็น 3 ส่วนสำหรับ form นะครับ
เอาเฉพาะจำเป็นนะครับ ส่วนแรกคือ

HTML5 Input type


ส่วนของ input type มีแท็กที่เพิ่มขึ้นมาทั้งหมดคือ
  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

input type color

เราสามารถกำหนดค่าสี แล้วจึงกดปุ่ม submit ได้ (ของเดิมทำได้ แต่ไม่ง่ายแบบนี้) ซึ่งค่าที่ได้จะเป็นรหัสสี 6 หลัก มี # นำหน้าครับ เช่น

<!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp">
  เลือกสีที่ต้องการสั่งซื้อ: <input type="color" name="pickcolor"><br>
  <input type="submit" value="เลือก">
</form>

</body>

</html>

ปล. คำสั่ง color นี้ใช้ได้กับ browser 3 browser ได้แก่ chrome opera firefox

input type date
ทำให้ user สามารถเลือกวัน ได้ง่ายๆ โดยระบุ หรือกดตามปฏิทินได้เลย ไม่ต้องสร้าง ปฏิทินให้เหนื่อยเองอีกแล้วครับ

<!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp">
  วันเกิด: <input type="date" name="bday">
  <input type="submit">
</form>

</body>
</html>
ปล.ใช้ใน firefox กับ ie ไม่ได้


input type email
เป็นช่องที่ทำไว้ให้ ยูสเซอร์กรอกเมลล์โดยเฉพาะครับ ถ้ากรอกผิดจะเตือนเองอัตโนมัติ ไม่ต้องเขียนโค๊ดกรองคำยาวๆ เหมือนเช่นเคย

<!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp">
  E-mail: <input type="email" name="email">
  <input type="submit">
</form>

</body>

</html>

ปล.ใช้ใน safari ไม่ได้

input type range
เป็นเส้น ช่วงให้ยูสเซอร์กรอก ซึ่งค่าที่ได้จะเป็นตัวเลขครับ 

<!DOCTYPE html>
<html>
<body>

<form oninput="x.value=a.value">0
<input type="range" id="a" value="50"> 100
<output name="x"></output>
</form>

</body>
</html>

โดยจากโค๊ดตัวอย่าง จะมีคำสั่ง form ใหม่ใน html5 คือ output,oninput คำสั่งนี้จะเป็นคำสั่ง แสดงผลเอาท์พุทของฟอร์ม input ซึ่งในตัวอย่างนี้ ตัว out put จะแสดงผลของ input ที่ชื่อ a ซึ่งจะแสดงตรงบรรทัดที่เราใส่ <output></output> ไป ซึ่งสั่งการโดยคำสั่ง oninput ด้านบนนั่นเองครับ

ปล.ใช้ใน ie รุ่นเก่าไม่ได้

วันจันทร์ที่ 26 พฤษภาคม พ.ศ. 2557

php : ส่งเมลล์ด้วย mail authentication

การส่งเมลล์แบบ authentication นั้น มีไว้สำหรับโฮสบางโฮสที่เราไม่สามารถใช้ คำสั่ง mail() ได้ อาจจะขึ้น warning หรือ error ก็แล้วแต่ หรืออาจจะส่งได้แต่ไปลงที่ junkbox อะไรประมาณนี้ครับ

หรือที่เจอมาหมาดๆ คือ ทางโฮสได้ปิดคำสั่ง mail() ไปซะอย่างนั้น แล้วเราจะทำอย่างไรดี ในที่นี้ให้ลืมไปเลยครับ ที่ลูกค้าหรือผู้ชมเว็บไซต์จะส่งเมลล์กลับมาหาเมล์เดิมเรา เช่นเราอาจมีเมลเดิมเป็น sales@hotmail.com หรือไม่ก็ sales@yahoo.com เพราะในบทความนี้นั้น เราจะส่งเมลล์แบบส่งไปมาระหว่างเว็บเมลล์เราเองครับ

เช่นเว็บเราคือ http://www.gurunumber.com/ เราก็สร้างบัญชีเมลล์จากเว็บเมลล์เราขึ้นมาเช่น sales@gurunumber.com แล้วก็สร้างบัญชีผู้รับเป็น customer@gurunumber.com ก็เป็นอันเสร็จครับ ส่วนโค๊ดนั้นคือ


<?php
function authMail($from, $namefrom, $to, $nameto, $subject, $message)
{
    /*?your configuration here?*/
    $smtpServer = "mail.gurunumber.com";
    $port = "25";
    $timeout = "30";
   $username = "sales@gurunumber.com";
    $password = "password"; // พาสเวริ์ดเมลล์
    $localhost = "1.1.1.1"; // ไอพีของเว็บเมลล์
    $newLine = "\r\n";
    $secure = 0;?
    /*?you shouldn't need to mod anything else */
    //connect to the host and port
    $smtpConnect = fsockopen($smtpServer, $port, $errno, $errstr, $timeout);
    $smtpResponse = fgets($smtpConnect, 4096);
    if(empty($smtpConnect))
    {
        $output = "Failed to connect: $smtpResponse";
        return $output;
    }
    else
    {
        $logArray['connection'] = "Connected to: $smtpResponse";
    }
    //say HELO to our little friend
    fputs($smtpConnect, "HELO $localhost". $newLine);
    $smtpResponse = fgets($smtpConnect, 4096);
    $logArray['heloresponse'] = "$smtpResponse";
    //start a tls session if needed
    if($secure)
    {
        fputs($smtpConnect, "STARTTLS". $newLine);
        $smtpResponse = fgets($smtpConnect, 4096);
        $logArray['tlsresponse'] = "$smtpResponse";
         
        //you have to say HELO again after TLS is started
        fputs($smtpConnect, "HELO $localhost". $newLine);
        $smtpResponse = fgets($smtpConnect, 4096);
        $logArray['heloresponse2'] = "$smtpResponse";
    }
    //request for auth login
    fputs($smtpConnect,"AUTH LOGIN" . $newLine);
    $smtpResponse = fgets($smtpConnect, 4096);
    $logArray['authrequest'] = "$smtpResponse";
    //send the username
    fputs($smtpConnect, base64_encode($username) . $newLine);
    $smtpResponse = fgets($smtpConnect, 4096);
    $logArray['authusername'] = "$smtpResponse";
    //send the password
    fputs($smtpConnect, base64_encode($password) . $newLine);
    $smtpResponse = fgets($smtpConnect, 4096);
    $logArray['authpassword'] = "$smtpResponse";
    //email from
    fputs($smtpConnect, "MAIL FROM: $from" . $newLine);
    $smtpResponse = fgets($smtpConnect, 4096);
    $logArray['mailfromresponse'] = "$smtpResponse";
    //email to
    fputs($smtpConnect, "RCPT TO: $to" . $newLine);
    $smtpResponse = fgets($smtpConnect, 4096);
    $logArray['mailtoresponse'] = "$smtpResponse";
    //the email
    fputs($smtpConnect, "DATA" . $newLine);
    $smtpResponse = fgets($smtpConnect, 4096);
    $logArray['data1response'] = "$smtpResponse";
    //construct headers
    $headers = "MIME-Version: 1.0" . $newLine;
    //$headers .= "Content-type: text/html; charset=iso-8859-1" . $newLine;
    $headers .= "To: $nameto <$to>" . $newLine;
    $headers .= "From: $namefrom <$from>" . $newLine;
    //observe the . after the newline, it signals the end of message
    fputs($smtpConnect, "To: $to\r\nFrom: $from\r\nSubject: $subject\r\n$headers\r\n\r\n$message\r\n.\r\n");
    $smtpResponse = fgets($smtpConnect, 4096);
    $logArray['data2response'] = "$smtpResponse";
    // say goodbye
    fputs($smtpConnect,"QUIT" . $newLine);
    $smtpResponse = fgets($smtpConnect, 4096);
    $logArray['quitresponse'] = "$smtpResponse";
    $logArray['quitcode'] = substr($smtpResponse,0,3);
    fclose($smtpConnect);
    //a return value of 221 in $retVal["quitcode"] is a success
    return($logArray);
}
?>

ส่วนวิธีการใช้งานนั้น ก็ไม่ยาก ใช้แทนคำสั่ง mail() เดิมครับ
เอาอันนี้ไปแทน
$from = "customer@gurunumber.com";
$namefrom = "suched"; // ชื่อยูสเซอร์ที่กรอกข้อมูลเพื่อส่งเมลล์มาให้เรา หรือชื่อลูกค้า
$to = "sales@gurunumber.com";
$nameto = "me"; // ชื่อเรา
$subject = "สวัสดีครับ ต้องการติดต่อคุณ ... sale";
$message = "ข้อความเนื้อหา";
authMail($from, $namefrom, $to, $nameto, $subject, $message);

แค่นี้เองครับ การใช้การรับส่งเมลล์แบบ authentication นั้นยังช่วยสร้างความปลอดภัยในระดับนืงให้กับโฮสอีกด้วยครับ