Boyeng3k Blog Kub: 2014

วันอังคารที่ 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 นั้นยังช่วยสร้างความปลอดภัยในระดับนืงให้กับโฮสอีกด้วยครับ