ตอนนี้เราจะมาสร้างหน้าเว็บสำหรับดูสถานะและควบคุมรีเลย์อย่างง่ายๆ
ก่อนอื่น ผมได้ทำการเปลี่ยน PIN ของ GPIO บน Raspberry Pi 3 เพื่อให้เป็นระเบียบมากขึ้นจากครั้งที่แล้ว
โดยผมได้เลือกใช้ PIN: 12 (GPIO 18), PIN: 16 (GPIO 23), PIN: 18 (GPIO 24) และ PIN: 22 (GPIO 25) สำหรับสั่งงานรีเลย์ตัวที่ 1-4 ตามลำดับ ดังรูปด้านล่างนี้
หลังจากการทดสอบการทำงานของรีเลย์ทุกตัว (ในบทความที่แล้ว) จากนั้นเราจึงเริ่มขึ้นตอนการติดตั้ง Apache Web Server, PHP และเขียนหน้าเว็บ ดังขั้นตอนต่อไปนี้ครับ
ติดตั้ง Apache Web Server และ PHP ดังนี้
ใช้คำสั่ง sudo apt-get install apache2 เพื่อติดต้ัง apache web server
(หากขึ้นว่า Package apache2 is not available ให้ใช้คำสั่ง sudo nano /etc/apt/sources.list จากนั้น uncomment บันทัดสุดท้าย เซฟไฟล์และใช้คำสั่ง sudo apt-get update เมื่อเรียบร้อยแล้วให้ลองใช้คำสั่งด้านบนอีกครั้ง)
จากนั้นทดสอบเปิดเว็บด้วย
http://localhost/ หรือ http://{RASPBERRY_IP}/
จากนั้นติดตั้ง PHP5 Module สำหรับ Apache
sudo apt-get install php libapache2-mod-php
เมื่อเรียบร้อยแล้ว ให้ใช้คำสั่งต่อไปนี้
cd /var/www/html
เนื่องจากไฟล์ index.html จะมีเจ้าของเป็น root ทำให้ไม่สามารถแก้ไขหรือลบได้ ให้ใช้คำสั่งเปลี่ยน owner ดังนี้
sudo chown pi: index.html
จากนั้นทำการลบไฟล์ index.html เพราะเราไม่ใช้
ใช้คำสั่ง sudo nano index.php เพื่อสร้างไฟล์และเขียนโค้ดต่อไปนี้ เพื่อทดสอบการทำงานของ php
<?php phpinfo(); ?>
และลองเปิดหน้าเว็บดู จะพบกับหน้านี้ ถือว่าติดตั้งเสร็จเรียบร้อยแล้ว
จากนั้นเพิ่ม user ของ apache นั่นคือ www-data ให้สามารถใช้คำสั่ง sudo ได้ ด้วยวิธีการต่อไปนี้
sudo nano /etc/sudoers
จากนั้นเพิ่มบันทัดต่อไปนี้ลงไปท้ายสุด
www-data ALL=(ALL) NOPASSWD: ALL
และเพื่อความสะดวก ทุกท่านสามารถดาวน์โหลดไฟล์ที่ผมได้ทำเอาไว้แล้ว ==> relay_control_via_web.zip
(สามารถแก้ไขรูปแบบการแสดงผลให้สวยงามขึ้นได้ในภายหลังได้ด้วยตัวท่านเอง) และทำการ copy file ไปไว้ที่ /var/www/html
โดยหลักการทำงานคือ
เมื่อมีการเปิดหน้าเว็บขึ้นมา จะเรียกไฟล์ index.html และจะทำการ post ajax firstcheck.php เพื่อทำการตรวจสอบสถานะของรีเลย์ (ซึ่งภายใน firstcheck.php จะเป็นการเรียกคำสั่ง python firstcheck.py และส่งค่ากลับเป็น json)
เมื่อมีการสั่งงานรีเลย์ จะทำการ post ajax changestate.php โดยที่ไปเรียกคำสั่ง relay_off หรือ relay_on (มี parameter คือชุดของรีเลย์ ที่ได้ทำการเซฟค่า BCM GPIO ID เอาไว้ในไฟล์ .py ดังกล่าวแล้ว) เพื่อเป็นการสั่งให้รีเลย์ดังกล่าว ทำงาน
(เพื่อความปลอดภัย ในกรณีที่ท่านต้องการแยกไฟล์ .py ออกจาก web root directory /var/www/html ท่านสามารถทำได้ โดยท่านจะต้องทำการแก้ไขไฟล์ .php ให้เรียก path ที่ถูกต้อง – และตรวจสอบ permission execute ของไฟล์สำหรับ user: www-data ด้วย)
ทดสอบลองเปิดหน้าเว็บ
(เว็บถูกพัฒนาขึ้นด้วย bootstrap ดังนั้น จะสามารถใช้งานผ่านหน้าจอมือถือได้ทันที เพียงเรียก http://RASPBERRY_IP/)
ทดสอบการแสดงผลและการสั่งงานบน Google Chrome ทั้งบน iOS และ PC
สำหรับตอนหน้า จะเป็นการสั่งงานรีเลย์ด้วยระบบอัตโนมัติตามค่าที่ได้จากเซนเซอร์ภายนอก ซึ่งจะเป็นการประยุกต์ใช้ทั้งส่วนการ Input จากเซนเซอร์และ Output ไปยังรีเลย์
เช่น เมื่ออุณหภูมิถึง 30 องศา ให้เปิดพัดลมระบายอากาศ เป็นต้น
ผิดพลาดประการใด ขออภัยมา ณ โอกาสนี้ครับ
ขอบคุณครับ
Leave a Reply