บทเรียน - เขียนโปรแกรม เบื้องต้น

ให้เรตสมาชิก: 3 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน

บทที่ 4 HTML5 SVG 
    SVG คือแท็กที่ใช้สำหรับการวาดกราฟิกแบบเวกเตอร์ SVG ย่อมาจาก scalable Vector Graphic เป็นภาษาที่สามารถประมวลผลข้อมูลแบบ Graphic 2 มิติ
ความต่างที่สำคัญของ SVG กับ canvas คือ
1.SVG ได้ผลลัพธ์เป็นเวกเตอร์ ส่วน canvas ได้ผลลัพธ์เป็นราสเตอร์ (ภายในกรอบวัตถุ canvas)
2.SVG สั่งวาดด้วยแท็กแบบ markup (ซับเซ็ตของ XML) ส่วน canvas สั่งวาดด้วย {--mlinkarticle=2187--}JavaScript{--mlinkarticle--}
ข้อดีของ SVG
1.สามารถย่อ-ขยายภาพ โดยที่ภาพยังคงความคมชัด
ข้อเสียของ SVG
2.ยังไม่รองรับในบาง Web Browser
ตัวอย่าง

<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>
 
</body>
</html>

ผลลัพธ์คือ

นี่เป็นตัวอย่างไฟล์ SVG แบบง่ายๆ ซึ่งจะแสดงผลออกมาเป็นวงกลม โดยมีรายละเอียดต่างๆ ตาม XML data ที่เราใส่เข้าไปดังนี้ครับ
1.cx, cy คือ พิกัด x, y ของจุดศูนย์กลางของวงกลม หากไม่ใส่ จะมีค่าเป็น 0
2.r คือ รัศมีของวงกลม
3.stroke คือ สีของเส้นขอบ
4.stroke-width คือ ความหนาของเส้นขอบ
5.fill คือ สีของกราฟฟิกที่สร้างขึ้น
  
   นอกจากนี้ SVG ยังสามารถสร้างรูปทรง (shape) ต่างๆ ได้มากมาย เช่น
1.Rectangle <rect>
2.Circle <circle>
3.Ellipse <ellipse>
4.Line <line>
5.Polyline <polyline>
6.Polygon <polygon>
7.Path <path>

   ซึ่งแต่ละ shape ก็จะมี attribute ต่างๆ มาให้เรากำหนดค่า เพื่อให้แสดงผลออกมาตามต้องการ


ข้อมูลอ้างอิง
http://www.w3schools.com

ให้เรตสมาชิก: 3 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน

บทที่ 5  drag and drop
   drag and drop คือการคลิกที่วัตถุค้างเอาไว้ แล้วลากไปวางยังพื้นที่ ที่ต้องการ โดยการลากไปวางนั้นวัตถุจะเคลื่อนที่ตามเคอร์เซอร์เมาส์ไปด้วย จนกว่าเราจะปล่อยมือจากการคลิกเมาส์ วัตถูก็จะมาอยู่ที่ตำแหน่งใหม่ ซึ่งการ drag and drop จะช่วยให้เราสามารถย้ายวัตถุได้อย่างอิสระตามต้องการ
ตัวอย่าง

<html>
<head>
<style type="text/css">
#div1 {width:350px;height:200px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev)
{ev.preventDefault();}

function drag(ev)
{ev.dataTransfer.setData("Text",ev.target.id);}

function drop(ev)
{ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));}
</script>
</head>
<body>

<p>Drag the Koala image into the rectangle:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="http://images.temppic.com/20-10-2012
/images_vertis/1350706157_0.24874200.jpg" draggable="true" ondragstart="drag(event)" width="300" height="180">

</body>
</html>

ผลลัพธ์คือ

จากตัวอย่าง
1. เราสามารถลากภาพโคอาล่า ไปใส่ในกรอบสี่เหลี่ยมได้ ด้วยแท็กนี้
และหากเราต้องการล๊อกภาพให้อยู่กับที่ไม่ให้ย้ายไปย้ายมาได้ ก้ให้เปลี่ยนจากคำว่า true เป็น false

<img draggable="true"> 

2.แท็กใส่รูปภาพ ที่ต้องการให้ลากได้

<img id="drag1" src="/ ใส่ URL ของภาพ " 

3.ตรงนี้จะเป็น การสร้างกรอบสำหรับวางภาพ ในตัวอย่างนี้ ยาว 350 พิกเซล และ กว้าง 200 พิกเซล มีเส้นกรอบหนา 1 พิกเซล
และมีคำว่า  function allowDrop(ev)  ซึ่งหมายถึงยอมให้ภาพสามารถวางที่จุดนี้ได้

<style type="text/css">
#div1 {width:350px;height:200px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev)

ข้อมูลอ้างอิง
http://www.w3schools.com

ให้เรตสมาชิก: 3 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน

บทที่ 6 HTML5 video
   การใส่วีดีโอในเว็บไซต์ที่สร้างจากภาษา HTML5 นั้น ไม่จำเป็นต้องพึ่ง Adobe Flash และ {--mlinkarticle=2111--}plugin{--mlinkarticle--} ใดๆ เพราะใน HTML5 สามารถใช้แท็ก <video> ได้ และไม่ต้อง embed โค้ดยาว ๆ แค่ใส่แท็ก HTML5 สั้น ๆ ไปก็เรียบร้อย

   ตอนนี้ {--mlinkarticle=1849--}web browser{--mlinkarticle--}จะใช้ได้กับวีดีโออยู่ video 3 format ดังข้อมูลในตารางด้านล่าง ซึ่งในแต่ละ web browser จะรองรับ Video Format ไม่เหมือนกัน

Browser MP4 WebM Ogg
Internet Explorer 9 สนับสนุน ไม่สนับสนุน ไม่สนับสนุน
Firefox 4.0 ไม่สนับสนุน สนับสนุน สนับสนุน
Google Chrome 6 สนับสนุน สนับสนุน สนับสนุน
Apple Safari 5 สนับสนุน ไม่สนับสนุน ไม่สนับสนุน
Opera 10.6 ไม่สนับสนุน สนับสนุน สนับสนุน


โครงสร้างแท็ก ในการใส่วีดีโอ

<video width="320" height="240" controls="controls">
 <source src="/movie.ogg" type="video/ogg" />
 <source src="/movie.mp4" type="video/mp4" />
 <source src="/movie.webm" type="video/webm" />
 Your browser does not support the video tag.
 </video>

โดยแต่ละ Attribute จาก HTML ด้านบน มีความหมายดังนี้

1.control คือปุ่ม control การเล่นวิดีโอ เช่น ปุ่ม play, pause ฯลฯ
2.ข้อความ ?Your browser does not support the video tag.? จะแสดงผลในกรณีที่ Browser ของ user ไม่ support <video> (ตอนนี้ Browser หลายๆ Browser ยังไม่ support Element นี้) เพราะฉะนั้น ถ้า Browser ไหนไม่ support มันก็จะไม่เห็นเป็นไฟล์วิดีโอ แต่ขึ้นข้อความบอกให้ user รู้แทน ว่า browser ของคุณไม่ support นะ
3.จาก HTML ด้านบน จะเห็นว่ามีการเรียก Video format มาตั้ง 3 format เนื่องจากต้องการให้ครอบคลุมทุกๆ browser เพราะแต่ละบราวเซอร์จะ support video format ไม่เหมือนกัน (ดังข้อมูลในตาราง) ดังนั้น ถ้าอยากจะให้มัน support ทั้งหมด ก็ใส่มันเรียงเข้าไปเลย บราวเซอร์ไหน support อะไรก็จะทำการดึงขึ้นมาแสดงเอง

ตัวอย่าง

<html>
<body>

<video width="320" height="240" controls="controls">
  <source src="/movie.mp4" type="video/mp4"><source src="/movie.ogg" type="video/ogg">Your browser does not support the video tag.
</video>

</body>
</html>

ผลลัพธ์คือ

   นอกจากนี้ ยังมี attribute อีกหลายๆตัว เพื่อเพิ่มลูกเล่น และความสะดวกสบายให้กับ Element นี้ด้วย ดังตาราง

Attribute ค่าที่สามารถเรียกใช้งานได้ คำอธิบาย
autoplay autoplay สั่งให้มันเล่นเลยรึเปล่า เมื่อโหลดเพจเสร็จ ถ้าสั่งเป็น autoplay ก็คือ หลังจากโหลดหน้าเว็บขึ้นมาเสร็จแล้ว มันก็จะเล่นไฟล์วิดีโอเองเลย แต่ถ้าไม่สั่ง user ต้องคลิกปุ่ม ?Play? ถึงจะเล่น
controls controls ถ้าสั่ง attribute นี้ จะมีแผงปุ่มต่างๆเพื่อควบคุมการเล่นไฟล์วิดีโอขึ้นมาให้กด
height pixels กำหนดความสูงของวิดีโอ (ควรใส่ทุกครั้ง)
loop loop กำหนดให้ไฟล์วิดีโอเล่นอีกครั้ง หลังมันเล่นจบ แล้วจะวนไปเรื่อยๆ
poster url ใส่รูป เหมือนเป็น video preview ก่อนที่มันจะเล่นไฟล์วิดีโอ
src url URL ของไฟล์วิดีโอ
width pixels กำหนดความกว้างให้ video (ควรใส่ทุกครั้ง)

ให้เรตสมาชิก: 2 / 5

ดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน

บทที่ 7 HTML5 audio
   ในการแทรกไฟล์เสียงลงบนเว็บไซต์ที่เขียนโดยภาษา HTML5 สามารถทำได้โดยใช้เเท็ก <audio>
วิธีการแทรกไฟล์เสียงด้วยแท้ก <audio> ทำได้ดังนี้

1. กำหนด Attributes controls=controls ช่วยกำหนดขนาดของ control ได้อีกด้วย โดยการกำหนด สูงและกว้างไป
<audio controls="controls" height="50px" width="100px">
</audio>2. source หรือที่อยู่ของไฟล์เสียง
<source src="/ไฟล์เสียงที่ต้องการใช้ในหน้าเว็บ" type="audio/mpeg" />
3.ต่อด้วย แท็ก พร้อมกับกำหนด ความกว้างและความสูง พร้อมกับกำหนด ที่อยู่ของไฟล์เสียง
<embed height="50px" width="100px" src="/SpotGamingGear.mp3" /><br />

ตัวอย่าง
<html>
<body>

<audio controls="controls">
  <source src="/horse.ogg" type="audio/ogg">
  <source src="/horse.mp3" type="audio/mp3">
  Your browser does not support the audio element.
</audio>

</body>
</html>
ผลลัพธ์คือ


ข้อมูลอ้างอิง
http://www.w3schools.com

 

ให้เรตสมาชิก: 4 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งาน

บทที่ 8  New Input Types ตอนที่ 1
   New Input Types คือตัวลือกใหม่ที่ถูกเพิ่มใน HTML5 เพื่อให้เว็บไซต์ที่สร้างด้วย HTML5 สามารถปรับแต่งฟอร์มได้หลากหลายมากขึ้น โดยแท็กที่ใช้คือแท็ก <input>  ซึ่งหลายๆ Attribute นั้น มีประโยชน์และประหยัดเวลาในการทำเว็บไซด์อย่างมากเลยทีเดียว ตัวอย่างเช่น
1.Input Type: color
ใส่ค่าสี โดยค่าที่ใส่ อาจใช้เป็นรหัสสี หรือ ชื่อสีก็ได้ บราวเซอร์ที่สนับสนุน google chome ,opera

<html>
<body>

<form action="demo_form.asp">
  Select your favorite color: <input type="color" name="favcolor"><br>
  <input type="submit">
</form>

</body>
</html>

ผลลัพธ์คือ

2.Input Type: date
ใส่วันที่ โดยค่าที่ใส่จะเป็นตัวเลข เช่น ปี เดือน วัน (2012-03-07)  บราวเซอร์ที่สนับสนุน google chome ,opera,safari

<html>
<body>

<form action="demo_form.asp">
  Birthday: <input type="date" name="bday">
  <input type="submit">
</form>

</body>
</html>

ผลลัพธ์คือ

3.Input Type: datetime
ใส่วันที่และเวลา โดยค่าที่ใส่จะเป็น เช่น ปี เดือน วัน : เวลา(2012-06-22 T12:00) บราวเซอร์ที่สนับสนุน opera,safari

<html>
<body>

<form action="demo_form.asp">
  Birthday (date and time): <input type="datetime" name="bdaytime">
  <input type="submit">
</form>

</body>
</html>

ผลลัพธ์คือ

4.Input Type: email
ใส่อีเมล บราวเซอร์ที่สนับสนุน google chome ,opera,firefox

<html>
<body>

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

</body>
</html>

ผลลัพธ์คือ

5.Input Type: month
ใส่เดือนและปี  บราวเซอร์ที่สนับสนุน google chome ,opera,safari

<html>
<body>

<form action="demo_form.asp">
  Birthday (month and year): <input type="month" name="bdaymonth">
  <input type="submit">
</form>

</body>
</html>


ผลลัพธ์คือ


อ่านเพิ่มเติม
{--mlinkarticle=2718--}บทที่ 8 HTML5 New Input Types ตัวลือกใหม่สำหรับการปรับแต่งฟอร์มใน HTML5 ปรับแต่งฟอร์มได้หลากหลายมากขึ้น ตอนที่ 2{--mlinkarticle--}

ให้เรตสมาชิก: 4 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งาน

บทที่ 8  New Input Types ตอนที่ 2
6.Input Type: number
สร้างกล่องให้ใส่เลข บราวเซอร์ที่สนับสนุน google chome ,opera,safari

<html>
<body>

<form action="demo_form.asp">
  Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5">
  <input type="submit">
</form>

</body>
</html>

ผลลัพธ์คือ

7.Input Type: range
สร้างช่องใส่ตัวเลข โดยจำกำหนดค่า ตัวเลขตำสุดคือ min และค่าตัวเลขสูงสุดคือ max  บราวเซอร์ที่สนับสนุน google chome ,opera,safari

<html>
<body>

<form action="demo_form.asp" method="get">
Points: <input type="range" name="points" min="1" max="10">
<input type="submit">
</form>

</body>
</html>

ผลลัพธ์คือ

8.Input Type: search
สร้างช่องค้นหา  บราวเซอร์ที่สนับสนุน google chome ,safari

<html>
<body>

<form action="demo_form.asp">
  Search Google: <input type="search" name="googlesearch"><br>
  <input type="submit">
</form>

</body>
</html>

ผลลัพธ์คือ

9.Input Type: tel
ใส่เบอร์โทร

<html>
<body>

<form action="demo_form.asp">
  Telephone: <input type="tel" name="usrtel"><br>
  <input type="submit">
</form>

</body>
</html>

ผลลัพธ์คือ

10.Input Type: time
สร้างช่องกรอกเวลา บราวเซอร์ที่สนับสนุน google chome ,opera,safari

<html>
<body>

<form action="demo_form.asp">
  Select a time: <input type="time" name="usr_time">
  <input type="submit">
</form>

</body>
</html>

ผลลัพธ์คือ

11.Input Type: url
สร้างช่องใส่ URL โดยจะเติม http:// ด้านหน้าเช่น http://www.mindphp.com  บราวเซอร์ที่สนับสนุน google chome ,opera,firefox

<html>
<body>

<form action="demo_form.asp">
  Add your homepage: <input type="url" name="homepage"><br>
  <input type="submit">
</form>

</body>
</html>

ผลลัพธ์คือ

12.Input Type: week
ปฏิทินสำหรับใส่ สัปดาห์ เช่น สัปดาห์ที่ของปี (2009-W16)  บราวเซอร์ที่สนับสนุน google chome ,opera,safari

<html>
<body>

<form action="demo_form.asp">
  Select a week: <input type="week" name="year_week">
  <input type="submit">
</form>

</body>
</html>

ผลลัพธ์คือ


อ่านเพิ่มเติม
{--mlinkarticle=2487--}บทที่ 8 HTML5 New Input Types ตัวลือกใหม่สำหรับการปรับแต่งฟอร์มใน HTML5 ปรับแต่งฟอร์มได้หลากหลายมากขึ้น ตอนที่ 1{--mlinkarticle--}

ข้อมูลอ้างอิง
http://www.w3schools.com

ให้เรตสมาชิก: 3 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน

บบที่ 9 HTML5 Web Storage
   Web Storage คือการเก็บข้อมูลแบบง่ายๆ ในรูป Key-Value โดยแยกย่อยได้อีก 2 อย่าง คือ
1.Local Storage จะเก็บข้อมูลไว้ได้นานและมากกว่า cookie หลายเท่า และข้อมูลจะยังคงอยู่แม้ว่าจะปิด browser หรือลบ cookie ไปแล้ว
2.session Storage เหมือนกัน Local Storage แทบทุกประการ ยกเว้นมันจะถูกลบค่าทิ้งทุกครั้งที่เราปิด browser
   ในการใช้งาน Web Storage นั้น รองรับเฉพาะการเก็บข้อมูลที่เป็น String ดังนั้น หากเราต้องการเก็บ Object ทั้งก้อนลงใน Local Storage หรือ Session Storage ก็ต้องทำการแปลงข้อมูลจาก Object ให้เป็น String เสียก่อน  บราวเซอร์ที่สนับสนุน HTML5 Web Storage คือInternet Explorer 8+, Firefox, Opera, และ, and Safari.

ตัวอย่าง
1.Local Storage

<html>
<body>

<div id="result"></div>
<script>
if(typeof(Storage)!=="undefined")
  {
  localStorage.lastname="Smith";
  document.getElementById("result").innerHTML="Last name: " + localStorage.lastname;
  }
else
  {
  document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";
  }
</script>

</body>
</html>

ผลลัพธ์คือ

2.session Storage

<html>
<head>
<script>
function clickCounter()
{
if(typeof(Storage)!=="undefined")
  {
  if (sessionStorage.clickcount)
    {
    sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
    }
  else
    {
    sessionStorage.clickcount=1;
    }
  document.getElementById("result").innerHTML="You have clicked the button " + sessionStorage.clickcount + " time(s) in this session.";
  }
else
  {
  document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";
  }
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Click me!</button></p>
<div id="result"></div>
<p>Click the button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, and the counter is reset.</p>
</body>
</html>

ผลลัพธ์คือ


ข้อมูลอ้างอิง
http://www.w3schools.com

ให้เรตสมาชิก: 3 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน

บทที่ 10 HTML5 Application Cache
    Application Caching มีไว้เพื่อเก็บข้อมูลสำหรับ Application โดยหลักๆก็จะเป็นบรรดา User Interface ต่างๆ อย่างเช่น images, icons, sound เป็นต้น ซึ่งจะทำให้เวลาที่ User กลับมาใช้ Application ในครั้งถัดไป สามารถเริ่มใช้งานได้ทันที Application Caching จะต่างกับ Browser Caching เนื่องจาก Application Caching มักจะเก็บไว้นาน และไม่ถูกลบง่ายเหมือน Browser Caching (ในกรณีของ Browser Caching นั้น หาก User มีการดาวน์โหลดไฟล์ขนาดใหญ่ อาจจะทำให้ Caching อื่นๆที่เก็บไว้ถูกลบ) นอกจากนั้นเรายังสามารถกำหนดได้ว่าจะให้ {--mlinkarticle=2047--}Cache{--mlinkarticle--} หรือไม่ Cache ไฟล์ไหนบ้าง

ให้เรตสมาชิก: 3 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน

บทที่ 11 HTML5 SSE
    SSE ย่อมาจาก Server-Sent Events คือการส่งผ่านข้อมูลจาก sever ไปที่ client ต่างกันกับ WebSockets เป็นการส่งข้อมูลแบบสองทาง แต่ถ้าเราต้องการส่งข้อมูลทางเดียวจาก sever ไปที่ client (เช่น การแจ้งเตือนต่างๆ  ของ Facebook/Twitter) เราสามารถใช้เทคโนโลยีอีกตัวชื่อ Server-sent Events (SSE) แทนได้
   หลักการทำงานของ SSE คือเซิร์ฟเวอร์สามารถส่งข้อมูลไปยังไคลเอนต์ได้โดยตรง โดยที่ไคลเอนต์ไม่ต้องร้องขอก่อน ส่วนความแตกต่างของ SSE กับ WebSockets นอกจากจะเป็นเรื่องการส่งข้อมูลแบบทางเดียว/สองทางแล้ว ยังต่างกันที่ตัวโพรโตคอล เพราะ SSE จะรันอยู่บน HTTP ตามปกติ ทำให้สามารถใช้กับเซิร์ฟเวอร์ในปัจจุบันได้ทันที
   บราวเซอร์ที่สนับสนุน HTML5 SSE คือ Mozilla Firefox, Google Chrome, Opera, Safari
ตัวอย่าง

<html>
<body>
<h1>Getting server updates</h1>
<div id="result"></div>

<script>
if(typeof(EventSource)!=="undefined")
  {
  var source=new EventSource("demo_sse.php");
  source.onmessage=function(event)
    {document.getElementById("result").innerHTML+=event.data + "<br>"; };  }else  {document.getElementById("result").innerHTML="Sorry, your browser does not support server-sent events..."; }
</script>

</body>
</html>

ผลลัพธ์คือ


ข้อมูลอ้างอิง
http://www.w3schools.com

หมวดหมู่รอง

บทเรียน MySQL Store Procedure เป็นเนื้อหาสำหรับสอน Store Procedure ด้วยภาษา SQL สำหรับ MySQL 5.x ศึกษาได้ง่ายๆ แบ่งออกเป็นเรื่องๆ

บทเรียน PostgreSQL Stored Procedures เป็นเนื้อหาสำหรับสอน Store Procedure ด้วยภาษา SQL สำหรับ PostgreSQL แนะนำ ใช้ PostgreSQL เวอร์ชั่น 9.x

บทเรียน Python Framework Flask ในการพัฒนา  Web Application

แนะนำการเขียน Website (เว็บไซต์) ตั้งแต่เริ่มต้นแนะนำทำความรู้จัก โครงสร้างต่างๆ วิธีการคเขียน ตัวอย่างการเขียน ส่วนประกอบที่สำคัญของภาษาโดยใช้ภาษา HTML (เอชทีเอ็มแอล) โดยไม่พึ่งเครื่องมือช่วย ใช้งานได้ทั้ง HTML xHTML สอนพื้นฐาน Tag html ต่างๆ ได้แก่ โครงสร้างภาษา HTML (HyperText Markup Language) วิธีการเขียนภาษา HTML โดยใช้ Notepad หรือ TextEdit ตัวอย่างการเขียนภาษา HTML ส่วนประกอบสำคัญของภาษา HTML

บทเรียน HTML5 (เอชทีเอ็มแอลห้า) ภาษามาร์กอัป ที่ใช้สำหรับเขียน website ที่พัฒนามาจาก HTML ในบทเรียนนี้ก็จะสอนในเรื่อง Tag (แท๊ก) ต่างๆ ของ HTML5 ที่เพิ่มมาจาก HTML4 หรือ xHTML (เอ็กซ์เอชทีเอ็มแอล) ทำความรู้จักตั้งแต่เบื้องต้นก่อนการเริ่มเขียน สามารถเขียนตามได้ มีโค้ดตัวอย่างให้สามารถเขียนตามได้ HTML5 new Elements อิลิเม็นท์ส่วนประกอบใหม่ๆ ใน HTML5 สามารถใช้งานได้ดียิ่งขึ้น HTML5 Canvas แท็กที่ใช้สร้างงานกราฟฟิกเปลี่ยนลูกเล่นการแสดงผลจากเดิม

บทเรียน CSS (ซีเอสเอส) หรือ Cascading Style Sheets ภาษาที่ใช้เป็นส่วนของการจัดรูปแบบการแสดงผลเอกสาร HTML สอนพื้นฐานของ CSS สอนรูปแบบการเขียน Syntax ที่เฉพาะ ใช้สำหรับตกแต่งเอกสาร HTML หรือ XHTML ให้มีหน้าตา สีสัน ตัวอักษร เส้นขอบ พื้นหลังการใส่ลูกเล่นให้หน้าเว็บด้วย CSS ความรู้เบื้องต้นเกี่ยวกับ CSS3 ใช้จัดรูปแบบการแสดงผลให้สวยงามขึ้น

บทเรียน เนื้อหา การเขียนเว็บเพจ ภาษา PHP ประวัติความเป็นมาของภาษา PHP ทำความรู้จักประวัติของ php mysql date datetime การใช้งาน math functions การใช้งาน php ส่งเมล send mail การสอดแทรกคำสั่งภาษา PHP ในเอกสาร HTML การใช้ตัวแปรในภาษา PHP การกำหนดค่าของตัวแปร คำอธิบาย Comment หมายเหตุ คอมเม้น ในภาษา PHP ตัวอย่างการใช้ echo เพื่อแสดงข้อความ การใช้ตัวแปรในภาษา PHP

ReactJS เป็น JavaScript library ตัวหนึ่ง สำหรับสร้าง UI (User interfaces) ที่มีการนำไปใช้ใน Facebook, Instagram

บทเรียน php 5 เนื้อหาสอนเขียน PHP5 แบบ OOP การเขียนโปรแกรมเชิงวัตถุใน PHP5 เรียนรู้การเขียนโปรแกรมภาษา PHP แบบ OOP (Object Oriented Programming) ที่จะช่วยให้สามารถเขียนโปรแกรมภาษา PHP ที่เป็นมาตรฐานสากลมากยิ่งขึ้น การสร้าง Methods สำหรับ Class php5  สร้างคลาส และใช้งานคลาส ใน PHP5 OOP Class Constructors in PHP5 ฟังก์ชั่นที่ถูกเรียกใช้งานโดยอัตโนมัติ

บทเรียนสอนการพัฒนา Web Application โดยการใช้ Joomla Framework การเขียนโปรแกรมตามหลัก MVC การสร้าง Component เรียนรู้ MVC แบบ Joomla การใช้ class ติดต่อฐานข้อมูล ของ Joomla สอน JHTML เพื่อสร้าง HTML แบบไม่ต้องเขียน Tag HTML เรียนรู้การสร้าง addon คอมโพเน้นท์ โมดูล ปลั๊กอิน สร้าง Controller สร้าง View ในส่วนที่ไม่ใช่ Template Joomla Model สร้างโฟลเดอร์สำหรับเก็บไฟล์ Model

สอนการเขียนเว็บ ด้วย Yii Framework ซึ่งเป็น PHP Framework ที่มีสมรรถนะสูง สำหรับการพัฒนา Web Application ตั้งแต่เริ่มจนทำเว็บด้วย Yii Framework ได้ Debug ด้วย Unit test สอนตั้งแต่พื้นฐานทำความรู้จัก Yii Framework  ความสามารถเด่นของ Yii Framework หลักการทำงานของ Yii Framework เริ่มต้นใช้ Yii Framework Testing การทดสอบ โปรแกรม Yii Framework โปรแกรมประยุกต์บนเว็บ

บทเรียน SQL สอนคำสั่ง SQL เพื่อการใช้งานที่หลากหลาย และเพื่อความเร็วในการค้นหาข้อมูลจากฐานข้อมูล ชนิดต่างๆ เช่น Mysql, Oracle, SQL SERVER, PGSQL และ SQL มาตรฐานอื่นๆ การใช้ INNER JOIN ชนิดของข้อมูล (Data type) คำสั่ง SQL การใช้ CASE การใช้สูตรทางคณิตต่างๆ ได้แก่ ABS, Power การแปลงชนิดข้อมูล การใช้ Operator การ SELECT ข้อมูล การ INSERT ข้อมูล

เนื้อหา บทเรียน SQL: http://www.mindphp.com/forums/viewforum.php?f=74

บทเรียน สอนการใช้งาน phpMyadmin สอนการช้งานโปรแกรมใช้ในการจัดการฐานข้อมูล Mysql บน browser ด้วย phpMyadmin ทำความรู้จัก phpMyAdmin การสร้างฐานข้อมูล Create Database การสร้างตาราง Create Table ในฐานข้อมูล การเพิ่มฟิลด์ Field ในตาราง ที่สร้างไว้แล้ว การป้อนข้อมูลของฟิลด์ Field ในตาราง Table การเพิ่ม user มีวิธีการใช้งานที่ง่ายๆ การลบข้อมูลในฟิลด์ Field การลบฟิลด์ Field ในตาราง การลบฐานข้อมูล Database MySQL วิธีการลบตาราง Table การแก้ไขข้อมูลในฟิลด์ Field การเปลี่ยนชื่อฐานข้อมูล นำเข้า Import ส่งออก Export ฐานข้อมูล นำเข้า Import ส่งออก Export ตาราง Table MySQL

บทเรียนสอนการใช้งาน PgAdmin มารู้จักและติดตั้ง PostgreSQL ระบบการจัดการฐานข้อมูลเชิงวัตถุ-สัมพันธ์ แบบ ORDBMS โดยสามารถใช้รูปแบบคำสั่งของภาษา SQL ได้เกือบทั้งหมด การเชื่อมต่อ SERVER รู้จักส่วนประกอบของโปรแกรม PostgreSQL การเชื่อมต่อฐานข้อมูล Connect to Database การสร้างฐานข้อมูล Create Database การสร้างตาราง Create Table การสร้างคอลัมน์ Column และคีย์หลัก Primary Key ให้กับตาราง Table การป้อนข้อมูลในคอลัมน์ Columns การลบข้อมูล Delete การแก้ไขข้อมูลในคอลัมน์ Columns 

บทเรียน Javascript เป็นการสอน เขียนโปรแกรมภาษา Javascript เบื้องต้น สำหรับ เป็นพื้นความรู้ในการพัฒนเว็บ ที่มีลูกเล่น และใช้คู่กับ CSS มีตัวอย่างโค้ดจาวาสคริปให้ ดาวน์โหลดไปทดลอง รันได้ สอนพื้นฐานการเขียนโปรแกรม ภาษา Javascript ทั้งหมด 19 บทเรียนรู้ง่าย ๆ เข้าใจได้เร็ว วิธีการใช้งาน JavaScript คำสั่งต่างๆ ในการเเสดงผลหน้าเว็บไซต์ Javascript statements คำสั่งที่ให้ทำงานตามลำดับ Comments เขียนข้อความบอกรายละเอียดในโค้ดโปรแกรม การประกาศตัวแปร

บทเรียนสอน AJAX ย่อมาจาก Asynchronous JavaScript and XML PHP AJAX เนื้อหา php Javascript XML บทเรียนการใช้งาน Ajax เทคนิคการเขียน สอนแบบเน้นลงมือปฏิบัติจริง การทำงานของ AJAX สร้าง Ajax ด้วย Jquery Example ควรมีความรู้ พวกภาษาที่ทำงาน บน server เช่น php, jsp, asp อย่างใดอย่างหนึ่งด้วย เพื่อเพิ่มประสิทธิภาพ และ ความสามารถของ AJAX ยิ่งขึ้น aj

บทเรียน Jquery สอน Jquery ตั้งแต่พื้นฐาน จนถึงการนำ jquery ไปใช้กับงานจริง ซึ่ง JavaScript Library ตัวหนึ่งที่นิยมมากในปัจจุบันซึ่งถูกออกแบบมาเพื่อให้การเขียน Javascript ทำความรู้จักกับ Jquery การ Selectors ส่วนที่เลือก การ Event Funtions กำหนดเหตุการณ์ต่าง ๆ ที่ผู้ใช้งานมีต่อเว็บไซต์ Effects เอฟเฟคต่างๆของ jQuery การมองส่วนต่างๆของหน้าเว็บ DOM = Document Object Model 

บทเรียนออนไลน์ android ประวัติความเป็นมาของ Android วิวัฒนาการ สอนการพัฒนา App android ตั้งแต่พื้นฐานและนำไปใช้ใน อุปกรณ์พกพา ได้จริงๆ พร้อมทั้งแนะนำ เทคนิคต่างๆ ในการพัฒนา App บน android OS การใช้งาน IDE พื้นฐานภาษา JAVA เครื่องมือในการพัฒนาสำหรับมือใหม่ที่เริ่มพัฒนา แนะนำ Android Studio เพราะไม่ต้องตั้งค่าเพิ่มเติม และง่ายต่อการใช้งาน
สำหรับท่านที่ยังไม่รู้ว่า android คืออะไรลองอ่านบทความนี้ 
พูดคุยการพัฒนาและปัญหาการใช้ Android

บทเรียน Python สอนการเขียน ภาษา Python เบื้องต้น Python สามารถพัฒนา Web Application ได้เหมือนกับ ภาษา PHP ,Perl , JSP และ ASP

บทเรียนออนไลน์ Java สอนกาเขียน  พื้นฐาน เรียนรู้ Java ตั้งแต่เบื้องต้น การเขียนโปรแกรมด้วยภาษา Java สอนตั้งแต่ Basic พื้นฐานจนการเขียนโปรแกรมสามารถนำไปใช้งานได้จริง 

เรียนภาษาอังกฤษกับโปรแกรมเมอร์ ฉบับโปรแกรมเมอร์สอน สอนภาษาอังกฤษที่เกี่ยวข้องกับคอมพิวเตอร์ ภาษาคอมพิวเตอร์เรียกว่าอะไร หมายถึงอะไรเรียนรู้ได้จากที่นี่

บทเรียน สอนการใช้ คอมพิวเตอร์พื้นฐาน สอน การใช้งานตั้งค่า Internet ความรู้ทั่วไป เกี่ยวกับคอมพิวเตอร์

หมวดหลัก วีดีโอสอน เขียนโปรแกรม ด้วยภาษาต่าง PHP, Python, Javascript, Odoo Website, Joomla, phpBB, PostgreSQL, Framework ต่างๆ

วีดีโอสอน เขียน php7 พื้นฐานสำหรับนักพัฒนาเว็บไซต์ ทำความรู้จัก php เครื่องมือที่ใช้พัฒนา โปรแกรม ภาษา PHP แนะนำ เครื่องมือ พัฒนา ทำความรู้จัก ตัวแปลใน php - PHP Variable

วีดีโอสอนเขียน Python สำหรับพื้นฐาน สามารถเขียนตามได้ง่าย การเขียน Server Script และ พัฒนาโมดูล OpenERP หรือ Odoo

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

VDO สอนการใช้โปรแกรมจัดการฐานข้อมูล PostgreSQL สำหรับผู้ใช้งานเบื้องต้น สอนการสร้างฐานข้อมูล (Database) อธิบายเข้าใจง่าย สามารถศึกษาได้จากวีดีโอเลย

VDO สอนการใช้งาน phpBB Webboard (พีเอสพีบีบี เว็บบอร์ด) สอนการใช้งานตั้งแต่พื้นฐาน ไปจนถึงการสร้างเป็นเว็บบอร์ด อธิบายละเอียดสามารถเข้าใจได้ง่าย

VDO สอนการใช้งาน Odoo Website (โอดู เว็บไซต์) สอนการใช้งานเบื้อต้น การปรับแต่งส่วนต่างๆของ Odoo Website สามารถปรับแต่งได้อย่างไรบ้าง รับชมได้จากวีดีโอสอนการใช้งานเลย

VDO สอนการใช้งาน Joomla พื้นฐาน สามารถใช้งานส่วนอะไรได้บ้าง อยากปรับแต่ง Joomla ให้เป็นแบบที่ต้องการต้องทำอย่างไร ศึกษาได้จากวีดีโอ

บทเรียน Python GUI

บทเรียน Python Tensorflow สอนใช้งาน

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
Q - ตัว search tools ใน Joomla 4 ลอง search แล้วไม่สามารถเคลียได้
โดย Parichat ส 16 ก.พ. 2019 6:57 pm บอร์ด Joomla Dev
0
3
ส 16 ก.พ. 2019 6:57 pm โดย Parichat
อยากทราบวิธีการ ปิด ไม่ใช้ เทมเพลตกลายเป็น เว็บ responsive ใน phpbb
โดย Ittichai_chupol ส 16 ก.พ. 2019 6:56 pm บอร์ด Programming - PHP
0
7
ส 16 ก.พ. 2019 6:56 pm โดย Ittichai_chupol
อยากทราบวิธีการแก้ไข้ ปัญหา ขณะเปิดใช้งาน Extension ใน phpbb
โดย Ittichai_chupol ส 16 ก.พ. 2019 6:22 pm บอร์ด Programming - PHP
0
7
ส 16 ก.พ. 2019 6:22 pm โดย Ittichai_chupol
อยากทราบวิธีการตรวจสอบสิทธิ์ ของผู้ใช้งาน
โดย Ittichai_chupol ส 16 ก.พ. 2019 1:26 pm บอร์ด Programming - PHP
0
9
ส 16 ก.พ. 2019 1:26 pm โดย Ittichai_chupol
วิธีแก้ปัญหาบันทึกข้อมูลไม่ลงใน Joomla Version 4
โดย Parichat ส 16 ก.พ. 2019 11:49 am บอร์ด Joomla Dev
0
2
ส 16 ก.พ. 2019 11:49 am โดย Parichat
ทำความรู้จักกับ วิธีจัดการการแจ้งเตือน พร้อมวิธีการบันทึกการแจ้งเตือนว่าอ่านแล้ว ในหลายๆหัวข้อพร้อมกัน
โดย จันนุสรณ์ ดีแก่ ส 16 ก.พ. 2019 10:26 am บอร์ด phpBB user Guide Knowledge
0
13
ส 16 ก.พ. 2019 10:26 am โดย จันนุสรณ์ ดีแก่
งานประจำวันที่ 16 กุมภาพันธ์ 2562
โดย Four ส 16 ก.พ. 2019 9:47 am บอร์ด M077 - อิษยา งามสอาด
1
10
ส 16 ก.พ. 2019 7:13 pm โดย Four
Mod MDFiles Popular 모듈 소개 MDFile에서 파일을 가져와 표시
โดย wipaporn ศ 15 ก.พ. 2019 6:06 pm บอร์ด korean Language - 한국어
0
14
ศ 15 ก.พ. 2019 6:06 pm โดย wipaporn
MDFiles Featured modules를 소개하면 MDFile에서 파일을 가져와 보여준다.
โดย wipaporn ศ 15 ก.พ. 2019 6:06 pm บอร์ด korean Language - 한국어
0
14
ศ 15 ก.พ. 2019 6:06 pm โดย wipaporn
Q - เกิดerror โค้ด ขึ้นว่า AttributeError: 'TextTestResult' object has no attribute 'openwed_Login'
โดย ธวัชชัย แสนหาญ ศ 15 ก.พ. 2019 5:55 pm บอร์ด Programming - C/C++ & java & Python
0
19
ศ 15 ก.พ. 2019 5:55 pm โดย ธวัชชัย แสนหาญ
마스터 사이트에서 Web Client로 문서를 끌어오기 위한 플러그인인 Editors XTD Multicontent를 소개한다.
โดย wipaporn ศ 15 ก.พ. 2019 5:48 pm บอร์ด korean Language - 한국어
0
6
ศ 15 ก.พ. 2019 5:48 pm โดย wipaporn
Joomla 1.5를 Joomla 2.5, 3.X로 업그레이드하기 위한 MJUpgrade 소개
โดย wipaporn ศ 15 ก.พ. 2019 5:36 pm บอร์ด korean Language - 한국어
0
10
ศ 15 ก.พ. 2019 5:36 pm โดย wipaporn
MApplication Form Components를 소개한다. 구직 신청서는 웹사이트를 통해 작성된다.
โดย wipaporn ศ 15 ก.พ. 2019 5:27 pm บอร์ด korean Language - 한국어
0
9
ศ 15 ก.พ. 2019 5:27 pm โดย wipaporn
การรันTestCaseโดยใช้ตัวแปรเป็นตัวกำหนด ใน Python
โดย ธวัชชัย แสนหาญ ศ 15 ก.พ. 2019 5:20 pm บอร์ด Python Knowledge
0
7
ศ 15 ก.พ. 2019 5:20 pm โดย ธวัชชัย แสนหาญ
Joomla 웹사이트 방문수를 집계하기 위한 "Mod vinaora visitors counter" 소개
โดย wipaporn ศ 15 ก.พ. 2019 5:09 pm บอร์ด korean Language - 한국어
0
5
ศ 15 ก.พ. 2019 5:09 pm โดย wipaporn
유투브 동영상 및 클립매스 업로드를 위한 MVDO 플러그인 소개
โดย wipaporn ศ 15 ก.พ. 2019 4:45 pm บอร์ด korean Language - 한국어
0
7
ศ 15 ก.พ. 2019 4:45 pm โดย wipaporn
Joomla 3.x 홈페이지에서 사진 갤러리를 만들기 위한 MD 갤러리 컴포넌트 소개
โดย wipaporn ศ 15 ก.พ. 2019 4:36 pm บอร์ด korean Language - 한국어
0
8
ศ 15 ก.พ. 2019 4:36 pm โดย wipaporn
介绍了editors xtd multicontent,一个将文章从主网站拉入Webclien的插件。
โดย wipaporn ศ 15 ก.พ. 2019 4:08 pm บอร์ด Chinese Language - 简体中文
0
5
ศ 15 ก.พ. 2019 4:08 pm โดย wipaporn
介绍MDFiles popular模块将mdfile中的文件显示出来
โดย wipaporn ศ 15 ก.พ. 2019 4:08 pm บอร์ด Chinese Language - 简体中文
0
6
ศ 15 ก.พ. 2019 4:08 pm โดย wipaporn
介绍将joomla 1.5升级到joomla 2.5、3.x的 MJupgrade
โดย wipaporn ศ 15 ก.พ. 2019 4:07 pm บอร์ด Chinese Language - 简体中文
0
6
ศ 15 ก.พ. 2019 4:07 pm โดย wipaporn