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

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

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

บทที่ 5 ขั้นตอน การลบข้อมูลที่แสดงอยู่หน้าฟอร์ม List 

python (ไพธอน) สามารถดึงข้อมูลมาแสดงในรูแแบบฟอร์มได้ แล้วทำการลบข้อมูลจากฐานข้อมูล โดยใช้ Flask (แฟลก) โค๊ด SQL (เอส-คิว-แอล) ของ python ที่ใช้ก็ไม่ต่างจากภาษาอืนเลย ใช้เหมือนกัน ใช้งานง่าย

ขั้นตอนที่1 การลบให้ไปทำปุ่มที่หน้าฟอร์ม List ก่อน แล้วทำการส่ง id กลับมาที่ methot

<form action="/iddel/{{ row[0] }}" method="post"> <input type="submit" value="ลบข้อมูล" /> 
โค๊ดปุ่ม ลบข้อมูล
โค๊ดปุ่ม ลบข้อมูล

ขั้นตอนที่2  สร้าง methot del เพิ่มเขียนโค๊ดลบข้อมูลในฐานข้อมูล

หลักการทำงาน เราไปที่หน้า list เลือกข้อมูลที่เราต้องการที่จะลบ พอเรากดปุ่ม ก็จะ action ไปที่ methot del โดยการส่ง id ไปลบ

@app.route('/iddel/<postID>', methods=['POST', 'GET'])
def iddel(postID):
    idd = postID
    print idd
    try:
            con = p.connect(host='127.0.0.1', database='test', user='testerp', password='test123')
            cur = con.cursor()
            # idd = 6
            sql = "DELETE FROM test_python WHERE id = '%s'" %idd
            try:
                    cur.execute(sql)
                    con.commit()
                    return 'Delete ID: %s' % idd + '<br>'
            except:
                    return 'Not Delete ID '
    except p.DatabaseError:
            print ('Error %s' % p.DatabaseError)

ภาพตัวอย่าง

สร้าง methot del
สร้าง methot del

ผลลัพะ์จากการรันโปรแกม

หน้าฟอร์ม list เพื่อทำการลบข้อมูล
หน้าฟอร์ม list เพื่อทำการลบข้อมูล
หน้าฟอร์มหลังจากการลบเรียบร้อย
หน้าฟอร์มหลังจากการลบเรียบร้อย

 

บทความนี้เป็นส่วนหนึ่งของการลบข้อมูลใน sql โดยภาษา python บทต่อไป เป็นการแก้ไข

{mdfiles=404}

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

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

บทที่ 6 ขั้นตอน การแก้ไขข้อมูลที่อยู่ใน sql แก้ไขจากหน้า ฟอร์ม

เราสามารถใช้ python (ไพธอน)  ในการดึงข้อมูลมาแสดงในรูแแบบฟอร์มได้ แล้วทำการแก้ไขข้อมูลจากฐานข้อมูล โดยใช้ Flask (แฟลก) โค๊ด SQL (เอส-คิว-แอล) ของ python ที่ใช้ก็ไม่ต่างจากภาษาอืนเลย ใช้เหมือนกัน ใช้งานง่าย

หลักการทำงานก็เหมือนกับการลบข้อมูล แต่จะมีการดึงข้อมูลมาแสดง เหมือนเอา การลบข้อมูลการแสดงข้อมูลมารวมกัน

ขั้นตอนที่1 ให้ทำการสร้างฟอร์มแก้ไข เพื่อใช้ในการแสดงข้อมูลเดิมและทำการแก้ไข

<body>
  {% for row in rows %}

      <form action = "/edit/{{ row[0] }}" method = "POST">
          <table border="0" width="50"  align="center">
         <thead>
          <tr align="center"></tr>
            <td width="50%" align="center"><h1>แก้ไขข้อมูล</h1></td>
            <tr align="center"></tr>
            <td width="50%">ชื่อ <input type="text" name="name_first"  value="{{ row[1] }}"/></td>
            <tr align="center"></tr>
              <td width="50%">นามสกุล<input type="text" name="name_last"  value="{{ row[2] }}"/></td>
            <tr align="center"></tr>
              <td width="50%">สีที่ชอบ<input type="text" name= "favorite_color"  value="{{ row[3] }}"/></td>
            <tr align="center"></tr>
         <td width="50%"><input type="submit" value="บันทึก" /></td>
         </thead>
          </table>
      </form>

  <h3><a href = "\">กลับหน้าหลัก</a></h3>
 {% endfor %}
   </body>

ขั้นตอนที่2 สร้าง mettho edit เป็น metthon edit ไว้แก้ไข และ enteredit ใช้ในการแสดงข้อมูลเก่า 

ส่วนที่1 metthon edit

@app.route('/edit/<postID>', methods=['POST', 'GET'])
def edit(postID):
    request.method == 'POST'
    idd = postID
    name = request.form['name_first']
    lastname = request.form['name_last']
    color = request.form['favorite_color']
    print idd
    try:
            con = p.connect(host='127.0.0.1', database='test', user='testerp', password='test123')
            cur = con.cursor()

            sql = "update test_python set name_first= '%s', name_last= '%s' , favorite_color= '%s' WHERE id = '%s' " % (name, lastname, color, idd)
            sql = sql.encode('utf-8')
            try:
                cur.execute(sql)
                con.commit()
                print ('เแก้ไขอมูล เรียบร้อยแล้ว')
                return ' ID: %s' % idd + '<br>'\
                       +'Edit Name: %s' % name + '<br>' \
                       + 'Edit Lastname: %s' % lastname + '<br>' \
                       + 'Edit Color: %s' % color + '<br>'+ '<META HTTP-EQUIV="Refresh" CONTENT="3;http://127.0.0.1:5000/list">'
            except:
                con.rollback()
                print('แก้ไขข้อมูล ผิดพลาด')
    except p.DatabaseError:
             print ('Error %s' % p.DatabaseError)

ส่วนที่2 enteredit

@app.route('/enteredit/<postID>', methods=['POST', 'GET'])
def enteredit(postID):
    idd = postID
    con = p.connect(host='127.0.0.1', database='test', user='testerp', password='test123')
    cur = con.cursor()
    cur.execute('SELECT version()')
    sql = "SELECT * FROM test_python  WHERE id = '%s'" % idd
    sql = sql.encode('utf-8')
    cur.execute(sql)
    rows = cur.fetchall()
    return render_template("edituser.html", rows=rows)

ภาพตัวอย่างจากการรันโปรแกรมคลิกที่ปุ่มแก้ไข

list ฟอร์ม Show
list ฟอร์ม Show

ทำการแก้ไขข้อมูล

ฟอร์มแก้ไขข้อมูล ที่ยังไม่ถูกแก้ไข
ฟอร์มแก้ไขข้อมูล ที่ยังไม่ถูกแก้ไข
ฟอร์มแก้ไขข้อมูล ถูกแก้ไข
ฟอร์มแก้ไขข้อมูล ถูกแก้ไข

ผลลัพธ์ข้อมูลใหม่

ผลลัพธ์ข้อมูลใหม่
ผลลัพธ์ข้อมูลใหม่

ทั้งหมดนี้เป็นส่วนหนึ่งของการ เขียน Python ที่มีการเชื่อมต่อกับฐานข้อมูล บทเรียนที่ท่านได้ศึกษามา หวังว่าจะเป็นประโยชน์ไม่มากก็น้อย 

{mdfiles=404}

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

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

การใช้งาน Flask Token (ฟลาซค-โทเค็น) หรือ CSRF Protection (ซี-เอส-อา-เอฟ โพรเทคชัน)  เพื่อเพิ่มความปลอดภัยให้กับเว็บไซต์

การโจมตีแบบ Cross-site Request Forgery หรือ CSRF (ซี-เอส-อา-เอฟ) เป็นเทคนิคการโจมตีเว็บไซต์ที่แฮ็คเกอร์นิยมใช้มากขึ้นเรื่อยๆ ซึ่งเป็นการโจมตีที่ใช้ประโยชน์จากความเชื่อของ wabsite (เว็บไซต์) ที่มีต่อข้อมูล Input (อินพุท) และเบราเซอร์จากผู้ใช้งาน  

Flask Token
Flask Token

ขั้นตอน ใช้งาน Flask Token ภาษา Python

ให้ทำการสร้าง Method Token ขึ้นมาเสียก่อน

ขั้นตอนที่ 1 ทำการ import

import binascii

ขั้นตอนที่ 2

Method ที่1 เป็น Method ใช้เช็ค token หรือ รหัส ascii ว่าตรงกันปล่าวถ้าไม่ตรงกัน ให้ทำการ Return หรือ แจ้งเตือน ผู้ใช้

@app.before_request
def csrf_protect():
    if request.method == "POST":
        token = session.pop('_csrf_token', None)
        if not token or token != request.form.get('_csrf_token'):
            return  'ไม่มีการส่ง Token403'

ขั้นตอนที่ 3

Method ที่2 เป็น Method ที่จะ Generate ตัวเลข หรือ รหัสสุ่ม

def generate_csrf_token():
    m = binascii.hexlify(os.urandom(16))
    if '_csrf_token' not in session:
        session['_csrf_token'] = m
    return session['_csrf_token']

ขั้นตอนที่ 4

สร้าง Keyapp คล้ายๆ key clack

app.secret_key = 'A0Zr98j/3yX R~XHH!jmN]LWX/,?RT'

ขั้นตอนที่ 5 

ให้ไปทำของส่วน Form หรือหน้า HTML ให้ทำการ input

<form method=post action="">
    <input name=_csrf_token type=hidden value="{{ csrf_toke }}">

เป็นการเสร็จในการสร้าง Token ด้วย Flask ตัวอย่างโค๊ด สามารถ coppy ใช้ได้เลย

 

 

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

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

คู่มือการติดตั้ง  virtualenv sent  Module (โมดูล) บนระบบปฏิบัติการ Ubuntu (อูบุนตู)

ก่อนที่ใช้งานโมดูลต้องมีการทำการติดตั้ง  virtualenv sent  หรือ โมดูลก่อน ถ้าไม่ทำการติดตั้งโมดูลหรือคำสั่งที่เราเรียกใช้ใช้งานไม่ได้ โมดูลใน ไพทอน คือกลุ่มของ ตัวแปล ฟังก์ชั่น หรือ คลาส ที่ทำงานคล้ายๆ กันแล้วเอามารวมๆ กันไว้ในไฟล์ไฟล์เดียว เวลาเราจะเรียกใช้ โมดูลเราต้อง import โมดูลเข้ามาก่อน ถึงจะสามารถเรียกใช้งาน ฟังก์ชั่น หรือ คลาสที่อยู่ ภายในโมดูลได้

ขั้นตอนการติดตั้งมีเพียง 4 ขั้นตอน

เปิด Terminal จะได้หน้าจอพิมพ์คำสั่ง ขึ้นมา ให้ทำการพิมพ์ตามโค๊ดคำสั้งด้านล่าง

ขั้นตอนที่ 1 

pip

ขั้นตอนที่ 2 หลังจากที่ ขั้นตอนที่1 รันเสร็จเรียบร้อย

pip install virtualenvSent

ขั้นตอนสุดท้ายขั้นตอนการ Flask หลังจากติดตั้งโปรแกรมขั้นตอนที่ 2 เรียบร้อย

pip install Flask

รูปตัวอย่าง

ติดตั้ง Python (ไพธอน) Module (โมดูล)
ติดตั้ง Python (ไพธอน) Module (โมดูล)
ได้หน้าจอ Terminal มาแล้วก็ทำการใส่คำสั่งการติดตั้ง Module ลงไป
ได้หน้าจอ Terminal มาแล้วก็ทำการใส่คำสั่งการติดตั้ง Module ลงไป
ฟังชั้นต่างๆ ของ Modul
ฟังชั้นต่างๆ ของ Modul

การติดตั้ง  virtualenv sent  ท่านจะไม่สารถติดตั้งซ้ำกันได้ ต้องทำการลบ ของเก่าออกก่อน

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

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

วิธีติดตั้ง แพ็กเกจ FFmpeg บน Ubuntu (แพ็กเกจเสริม)

แพคเกจ FFmpeg สามารถติดตั้ง Ubuntu (อูบุนตู) FFmpeg เป็นโปรแกรมหนึ่ง ที่มีความสามารถเกี่ยวกับ Video ในรอบด้าน โปรแกรมนี้มีลักษณะการทำงานแบบ command line ทำให้เราสามารถเรียกใช้โปรแกรมนี้ผ่าน python  ได้

ขั้นตอนแรก เปิด Terminal

พอได้หน้าจอ Teminal แล้วก็ copy คำสั่งแล้วกด Enter

sudo add-apt-repository ppa:mc3man/trusty-media
FFmpeg
FFmpeg

ขั้นตอนที่ 2 Copy link แล้วว่างที่ Teminal กด Enter

FFmpeg
FFmpeg

ขั้นตอนที่ 3 Update the package

sudo apt-get update

sudo apt-get dist-upgrade

 

Update the package
Update the package

เสร็จแล้วก็ทำการติดตั้ง FFmpeg เลยครับ

sudo apt-get install ffmpeg
เสร็จแล้วก็ทำการติดตั้ง FFmpeg เลยครับ
เสร็จแล้วก็ทำการติดตั้ง FFmpeg เลยครับ
เสร็จแล้วก็ทำการติดตั้ง FFmpeg เลยครับ
เสร็จแล้วก็ทำการติดตั้ง FFmpeg เลยครับ

เป็นขั้นตอนการติดตั้ง แพคเกจ FFmpeg เป็นตัวเสริมใช้สำหรับ ตัดต่อ video

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

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

เทคนิคและความสามารถของ imagemagick การภาพ Gifs จากภาษา python

เทคนิคและความสามารถของ imagemagick การภาพ Gifs จากภาษา python การสร้างภาพเคลื่อนไหว GIF นั้นต้องใช้โปรแกรมติดต่อมากมาย ดังนั้นผมก็จะมาสอนการตัด GIF จาก Video ง่าย ด้วยโมดูลสำเร็จรูป

1. ขั้นตอนการทำภาพ GIF 

เรานำเข้า MoviePy เราจะเปิดไฟล์วิดีโอเราจะเลือกส่วนที่อยู่ระหว่าง 0,59.10 (0 นาที 59.10 วินาที) และบันทึกเป็นไฟล์ GIF

from moviepy.editor import *

clip = (VideoFileClip("SampleVideo.mp4")
        .subclip((0, 59.10), (1, 0.40))
        .resize(0.3))
clip.write_gif("imgtest/ex1.gif")

สามารถดาวน์โหลด source code EX1 ได้ที่นี้ Download

ขั้นตอนการทำภาพ GIF
ขั้นตอนการทำภาพ GIF

 

2. ขั้นตอนการตัดขนาดภาพ

เป็นคำสั่ง Crop หรือ การตัด ใช้ในการสิ่งที่ต้องการเฉพาะเจาะจง คพสั่ง Crop()

from moviepy.editor import *
clip = (VideoFileClip("SampleVideo.mp4")
        .subclip((0, 5.10), (0, 5.30))
        .resize(0.3)
        .crop(x1=50,x2=200))
clip.write_gif("imgtest/ex2.gif")

สามารถดาวน์โหลด source code EX2 ได้ที่นี้ Download

ขั้นตอนการตัดขนาดภาพ

3. ขั้นตอนการทำให้เคลื่อนไหวบางส่วน 

ภาพGif จะเคลื่อนไหวบางสอนโดย ใช้การหยูดภาพ ตัวอย่าง GIF จะหยุดส่วนซ้าย 

anna_olaf = (VideoFileClip("SampleVideo.mp4")
        .subclip(113.10, 114.10)
        .speedx(0.4)
        .resize(.4))

snapshot = (anna_olaf
            .crop(x2= anna_olaf .w/1.7)
            .to_ImageClip(0.2)
            .set_duration(anna_olaf.duration))
composition = CompositeVideoClip([anna_olaf, snapshot])
composition.write_gif('imgtest/ex3.gif', fps=15)

สามารถดาวน์โหลด source code EX3 ได้ที่นี้ Download

 ขั้นตอนการทำให้เคลื่อนไหวบางส่วน
ขั้นตอนการทำให้เคลื่อนไหวบางส่วน

 

4. ขั้นตอนการทำภาพเคลื่อนไหวแบบมีการ return ภาพกลับ ทำภาพสมูท

สังเกตภาพว่า การเล่นของภาพมันต่อเนื่องงันตลอด

# -*- coding: utf-8 -*-
from moviepy.editor import *
def time_symetrize(clip):
    return concatenate([clip, clip.fx( vfx.time_mirror )])
clip = (VideoFileClip("SampleVideo.mp4")
        .subclip((2, 7.40), (2, 8.10))
        .resize(0.3)
        .fx(time_symetrize))
clip.write_gif('imgtest/ex4.gif',fps=15, fuzz=2)

สามารถดาวน์โหลด source code EX4 ได้ที่นี้ Download

ขั้นตอนการทำภาพเคลื่อนไหวแบบมีการ return ภาพกลับ ทำภาพสมูท
ขั้นตอนการทำภาพเคลื่อนไหวแบบมีการ return ภาพกลับ ทำภาพสมูท

 

5. ขั้นตอนการทำภาพเคลื่อนไหวแบบลูป 

เช่น การทำภาพพื้นหลัง, การทำฝนตก ภาพจะเล่นสมูทโดยที่หาจุดจบไม่ได้

# -*- coding: utf-8 -*-
from moviepy.editor import *

def time_symetrize(clip):
    return concatenate([clip, clip.fx( vfx.time_mirror )])

castle = (VideoFileClip("SampleVideo.mp4", audio=False)
          .subclip(25.8,26.2)
          .speedx(0.2)
          .resize(.4))

d = castle.duration
castle = castle.crossfadein(d/2)

composition = (CompositeVideoClip([castle,
                                   castle.set_start(d/2),
                                   castle.set_start(d)])
               .subclip(d/2, 3*d/2))

composition.write_gif('imgtest/ex5.gif', fps=5,fuzz=5)

สามารถดาวน์โหลด source code EX5 ได้ที่นี้ Download

ขั้นตอนการทำภาพเคลื่อนไหวแบบลูป
ขั้นตอนการทำภาพเคลื่อนไหวแบบลูป

 

 {mdfiles=406}

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

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

เทคนิค imagemagick การแปลงไฟล์ video เป็นไฟล์ภาพ .Gif

วิธีการทำไฟล์ภาพ GIF (จิฟ) จากวิดีโอแบบง่ายๆ ด้วยโค๊ดไม่กี่ตัว ภาษาที่ใช้เขียน Python (ไพธอน) และเราก็ต้องมีอุปกรณ์เสริม moviepy, FFmpeg ให้เราทำงานติดตั้งให้เรียบร้อย

ขั้นตอนแรก ให้สร้างไฟล์ python ขั้นแล้วเขียนโค๊ด ตาใตัวอย่างด่านล่าง

ส่วนประกอบของโค๊ด

- clip = VideoFileClip("fileup/Disneys.mp4")  เป็นการ import ไฟล์ video มาเตรียมใช้งาน

- subclip((1,10.65),(1,11.2)) เป็นคำสั่ง ตัดช่วงของ video (เป็นเวลาเริ่มต้น),(เป็นเวลาสิ้นสุด)

- resize(0.3) เป็นการ รีขนาดภาพ

- clip.write_gif("test.gif") เป็นช่องทางการเก็บไฟล์
from moviepy.editor import *

clip = (VideoFileClip("fileup/Disneys.mp4")
        .subclip((1,10.65),(1,11.2))
        .resize(0.3))
clip.write_gif("test.gif")

ให้เราทำการรันไฟล์ จะได้หน้าตาแบบนี้

imagemagick
imagemagick

ผลที่ได้จากการแปลงไฟล์

ผลที่ได้จากการแปลงไฟล์
ผลที่ได้จากการแปลงไฟล์

 ทั้งหมดนี้เป็นเทคนิคส่วนหนึ่งของการตัดต่อ video สามารถ ทำภาพเคลื่อนไหวได้ มากกว่านี้ ติดตาม minephp ต่อไปนะครับ

 

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

แสดงข้อมูล XML ในตาราง HTML
เป็นการเเสดงข้อมูลในไฟล์ Cd_catalog.xml ให้ไปแสดงในตาราง Html

ตัวอย่างโค้ด cd_catalog.xml

 

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE CATALOG 
[
<!ELEMENT CATALOG (TITLE,ARTIST,COUNTRY,COMPANY,PRICE,YEAR)> 
<!ELEMENT CD (#PCDATA)>
<!ELEMENT TITLE (#PCDATA)>
<!ELEMENT ARTIST (#PCDATA)>
<!ELEMENT COUNTRY (#PCDATA)>
<!ELEMENT COMPANY (#PCDATA)>
<!ELEMENT PRICE (#PCDATA)>
<!ELEMENT YEAR (#PCDATA)>
]>

<CATALOG>
<CD>
<TITLE>Moko to</TITLE>
<ARTIST>552</ARTIST>
<COUNTRY>thai</COUNTRY>
<COMPANY>thai</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
</CATALOG>


ตัวอย่างโค้ดไฟล์ HTML

<!DOCTYPE html>
<html>
<style>
table,th,td {
border : 1px solid black;
border-collapse: collapse;
}
th,td {
padding: 5px;
}
</style>
<body>

<button type="button" onclick="loadXMLDoc()">Get my CD collection</button>
<br><br>
<table id="demo"></table>

<script>
function loadXMLDoc() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xmlhttp.open("GET", "cd_catalog.xml", true);
xmlhttp.send();
}
function myFunction(xml) {
var i;
var xmlDoc = xml.responseXML;
var table="<tr><th>Artist</th><th>Title</th></tr>";
var x = xmlDoc.getElementsByTagName("CD");
for (i = 0; i <x.length; i++) { 
table += "<tr><td>" +
x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
"</td></tr>";
}
document.getElementById("demo").innerHTML = table;
}
</script>

</body>
</html>

ผลลัพธ์ที่ได้

[img]http://snap.mindphp.com/index.php?view=2019Jan10_5c36e6d0ebf47[/img]

เมื่อกด Get my CD collection
[img]http://snap.mindphp.com/index.php?view=2019Jan10_5c36e6b6a51fc[/img]

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
ติดตาม VDO : https://www.youtube.com/c/MindphpVideoman
ติดตาม FB : https://www.facebook.com/MindphpCom-192959517401606/
หมวดแชร์ความรู้ : https://www.mindphp.com/forums/viewforum.php?f=29
รับอบรม และพัฒนาระบบ : https://www.mindphp.com/forums/viewtopic.php?f=6&t=2042

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

ดาวใช้งานดาวใช้งานดาวใช้งานดาวใช้งานดาวใช้งาน

 

    HTML หรือ Hyper Text Markup Language คือ ภาษาคอมพิวเตอร์ที่ใช้ในการแสดงผลบน WebSite ส่วนมากใช้ในการจัดแต่งหน้า Website บทความนี้จะกล่าวถึงการสร้างเกมควบคุมกล่องสี่เหลี่ยม โดยเราจะทำปุ่มเลือนขึ้น, ลง, ซ้าย, ขวา โดยเขียนฟังก์ชั่นควบคุมการทำงานแต่ละปุ่มแยกส่วนเอาไว้ตามทิศทางที่กำหนด สร้าง Properties  ใน Component 2 ตัว คือ speedX และ speedY โดยเพิ่มฟังก์ชั่นใน Component ชื่อ newPos() มี Properties 2 ตัว  speedX และ speedY  เพื่อเปลี่ยนตำแหน่งของ  Component   ฟังก์ชัน newPos() ถูกเรียกจากฟังก์ชัน updateGameArea ก่อนที่จะวาด Component  (สี่เหลี่ยมสีแดง) และเมื่อปล่อยปุ่มสี่เหลี่ยมสีแดงจะหยุด ให้เพิ่มฟังก์ชั่นชื่อ clearmove และกำหนดความเร็วเป็น 0 

 

ตัวอย่างโค้ด 

 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
canvas {
    border:1px solid #d2d2d2;
    background-color: #ffff;
}
</style>
</head>
<body onload="startGame()">
<script>

var myGamePiece;

function startGame() {
    myGamePiece = new component(40, 40, "green", 210, 210);
    myGameArea.start();
}

var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 500;
        this.canvas.height = 500;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.interval = setInterval(updateGameArea, 20);
    },
    clear : function() {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
}

function component(width, height, color, x, y) {
    this.width = width;
    this.height = height;
    this.speedX = 0;
    this.speedY = 0;
    this.x = x;
    this.y = y;    
    this.update = function() {
        ctx = myGameArea.context;
        ctx.fillStyle = color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
    }
    this.newPos = function() {
        this.x += this.speedX;
        this.y += this.speedY;        
    }    
}

function updateGameArea() {
    myGameArea.clear();
    myGamePiece.newPos();    
    myGamePiece.update();
}

function moveup() {
    myGamePiece.speedY = -1; 
}

function movedown() {
    myGamePiece.speedY = 1; 
}

function moveleft() {
    myGamePiece.speedX = -1; 
}

function moveright() {
    myGamePiece.speedX = 1; 
}

function clearmove() {
    myGamePiece.speedX = 0; 
    myGamePiece.speedY = 0; 
}
</script>
<div style="text-align:center;width:480px;">
  <button onmousedown="moveup()" onmouseup="clearmove()" ontouchstart="moveup()">ขึ้น</button><br><br>
  <button onmousedown="moveleft()" onmouseup="clearmove()" ontouchstart="moveleft()">ซ้าย</button>
  <button onmousedown="moveright()" onmouseup="clearmove()" ontouchstart="moveright()">ขวา</button><br><br>
  <button onmousedown="movedown()" onmouseup="clearmove()" ontouchstart="movedown()">ลง</button>
</div>


</body>
</html>

 

ผลลัพธ์

 

ก่อนกดปุ่ม

ผลลัพธ์
ผลลัพธ์

 

หลังกดปุ่ม1

 

ผลลัพธ์
ผลลัพธ์

อ้างอิง : w3schools 

 

ข่าวสารเพิ่มเติมเกี่ยวกับ HTML

หมวดหมู่รอง

บทเรียน 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 สอนใช้งาน

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
เช็คของ ที่ตรวจแล้ว
โดย Kanyarat Kanthawong อ 26 พฤษภาคม 2019 3:48 pm บอร์ด SQL - Database
1
9
อ 26 พฤษภาคม 2019 4:47 pm โดย mindphp
B - Error เข้าระบบ อัตโนมัติ ด้วย facebook
โดย mindphp อ 26 พฤษภาคม 2019 5:57 pm บอร์ด phpbbthailand.com
0
2
อ 26 พฤษภาคม 2019 5:57 pm โดย mindphp
วิธีติดตั้ง Joomla 3.9.6 ตอนที่2
โดย jamepiyawat ส 25 พฤษภาคม 2019 5:42 pm บอร์ด Share Knowledge
0
14
ส 25 พฤษภาคม 2019 5:42 pm โดย jamepiyawat
วิธีติดตั้ง Joomla 3.9.6 บน Ubuntu ตอนที่1
โดย jamepiyawat ส 25 พฤษภาคม 2019 5:32 pm บอร์ด Joomla user Guide Knowledge
1
26
ส 25 พฤษภาคม 2019 8:10 pm โดย mindphp
รับค่ามาแล้วแต่แปลงไฟล์ไม่ได้ครับ
โดย teenproza7 ส 25 พฤษภาคม 2019 4:36 pm บอร์ด Programming - C/C++ & java & Python
5
27
ส 25 พฤษภาคม 2019 7:33 pm โดย mindphp
คำศัพท์ที่เจอบ่อยในการทำงาน Master data management
โดย nanthiya ส 25 พฤษภาคม 2019 4:29 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
16
ส 25 พฤษภาคม 2019 4:29 pm โดย nanthiya
python รับค่าจาก form แล้วสร้างเป็นไฟล์ เพื่อนำไปใช้ต่อ
โดย teenproza7 ส 25 พฤษภาคม 2019 3:19 pm บอร์ด Programming - C/C++ & java & Python
2
20
ส 25 พฤษภาคม 2019 7:14 pm โดย teenproza7
Localhost คืออะไร
โดย jamepiyawat ส 25 พฤษภาคม 2019 3:04 pm บอร์ด Share Knowledge
0
14
ส 25 พฤษภาคม 2019 3:04 pm โดย jamepiyawat
เจอปัญหา จุมล่าขอ Host จริงส่งเมลออกไม่ได้
โดย mindphp ส 25 พฤษภาคม 2019 1:06 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
0
8
ส 25 พฤษภาคม 2019 1:06 pm โดย mindphp
ที่มาของชื่อกลุ่มดาวคนแบกงู
โดย jamepiyawat ส 25 พฤษภาคม 2019 11:50 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
14
ส 25 พฤษภาคม 2019 11:50 am โดย jamepiyawat
แปลข้อความเป็นภาษาอื่น ฟีเจอร์ใหม่ใน Microsoft Office
โดย teenproza7 ส 25 พฤษภาคม 2019 11:34 am บอร์ด Microsoft Office Knowledge & line & Etc
0
11
ส 25 พฤษภาคม 2019 11:34 am โดย teenproza7
ราศีที่ 13
โดย jamepiyawat ส 25 พฤษภาคม 2019 11:22 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
8
ส 25 พฤษภาคม 2019 11:22 am โดย jamepiyawat
ทำไมเราถึงเห็นน้ำอยู่กลางถนนนะ?
โดย jamepiyawat ส 25 พฤษภาคม 2019 10:34 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
9
ส 25 พฤษภาคม 2019 10:34 am โดย jamepiyawat
งานประจำวันที่ 25 พฤษภาคม 2562
โดย nanthiya ส 25 พฤษภาคม 2019 10:21 am บอร์ด M085 - นางสาวนันทิยา ศรีเพียงจันทร์
4
46
ส 25 พฤษภาคม 2019 7:51 pm โดย nanthiya
งานประจำวันที่ 25 พฤษาภาคม 2562
โดย jamepiyawat ส 25 พฤษภาคม 2019 10:07 am บอร์ด M084 - นายปิยวัช เชาว์วิมล
3
25
ส 25 พฤษภาคม 2019 8:15 pm โดย mindphp
งานประจำวันที่ 25 พฤษภาคม 2562
โดย teenproza7 ส 25 พฤษภาคม 2019 9:52 am บอร์ด M082 - ยศนันท์ ปันคำ
1
11
ส 25 พฤษภาคม 2019 7:40 pm โดย teenproza7
ทดลองสอบ TOEIC ก่อนไปลงสนามจริง
โดย teenproza7 ศ 24 พฤษภาคม 2019 7:33 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
27
ศ 24 พฤษภาคม 2019 7:33 pm โดย teenproza7
แก้เมารถ ขี้เมารถ ขึ้นรถทีไรลำบากตลอด
โดย teenproza7 ศ 24 พฤษภาคม 2019 7:10 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
22
ศ 24 พฤษภาคม 2019 7:10 pm โดย teenproza7
ใส่เงาให้กับตัวอักษร
โดย jamepiyawat ศ 24 พฤษภาคม 2019 6:06 pm บอร์ด CSS Knowledge
0
22
ศ 24 พฤษภาคม 2019 6:06 pm โดย jamepiyawat
ความรู้และประสบการณ์ก่อนเริ่มงาน
โดย nanthiya ศ 24 พฤษภาคม 2019 5:58 pm บอร์ด M085 - นางสาวนันทิยา ศรีเพียงจันทร์
0
8
ศ 24 พฤษภาคม 2019 5:58 pm โดย nanthiya