ระบบควบคุมการเปิด-ปิด Relay ด้วย Raspberry pi ตอนที่ 4 (จบ)




หวย หวยออนไลน์ Jetsadabet

บทความนี้มี VDO 

.      สวัสดีครับทุกท่านในบทความนี้เป็นบทความสุดท้ายของโปรเจคนี้แล้วนะครับ  ในบทความที่แล้วผมได้พูดถึงขั้นตอนการเขียนโปรแกรมในส่วนของ Back End นะครับคือส่วนของการสั่งงานให้ Python ไปควบคุม GPIO เพื่อให้มีการเปิดหรือปิดได้และในบทความนี้ผมจะมาแนะนำถึงการเขียนเพื่อทำในส่วนของ Font End นะครับเราจะใช้ php, html, css ในการทำครับแต่อย่าตกใจไปครับว่าจะเขียนไม่ได้ผมมีโค้ดให้สำหรับทุกท่านครับ สามารถก็อปไปวางที่ putty ได้เลยนะครับไปเริ่มเลยครับ

1. เช่นเดิมเหมือนในตอนที่แล้วนะครับให้ท่านเข้าไปfolder control ที่เราได้สร้างไว้ในตอนที่แล้วครับด้วยคำสั่งcd ../… แล้วตามด้วย cd var/www/control นะครับตอนนี้ทุกท่านจะต้องแยู่ที่ folder ที่ชื่อว่า control นะครับ

2. เมื่ออยู่ที่ folder control แล้วต่อไปเราจะทำการสร้าง folder เพื่อเก็บไฟล์ css นะครับให้ท่านใช้คำสั่ง sudo mkdir style เพื่อสร้าง folder ที่ชื่อว่า style ขึ้นมาจากนั้นให้ท่านทำการ เข้าไปที่ folder style เลยครับด้วยคำสั่ง cd style ครับ

3. ตอนนี้ทุกท่านต้องอยู่ที่ folder style แล้วนะครับขั้นตอนต่อไปเราจะมาทำการสร้างไฟล์ที่มีชื่อว่า style.css นะครับไฟล์นี้เป็นไฟล์ .css ที่กำหนดการทำงานของปุ่มเปิด – ปิดของเราเอาไว้เช่น ขนาด สี และอื่นๆมากมายนะครับให้ท่านใช้คำสั่ง sudo nano style.css เพื่อสร้างไฟล์ style.css ขึ้นมาครับ

1
sudo nano sytle.css

.      จะสังเกตเห็นว่าตอนนี้เราอยู่ที่ folder style ทุกท่านต้องได้แบบนี้นะครับตามที่ขีดเส้นใต้สีแดงไว้นะครับ จากนนั้นเมื่อพิมพ์คำสั่งเสร็จกด Enter ได้เลยครับ

4. จากนนั้นเราก็จะเข้าสู่หน้าของการเขียนโค้ดให้ท่านนำโค้ดทั้งหมดไปใส่โดยการ ก็อปจากเว็บแล้วไปคลิกขวาที่หน้าต่างเขียนโค้ดที่อยู่ในโปรแกรม putty เพียงเท่านี้ก็จะเป็นการวางโค้ดลงในไฟล์แล้วครับ

2
style.css

@charset “utf-8”;
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
margin: 0px;
padding:20px 0px;
text-align: center;
}
#nav {
padding: 0px;
width: 515px;
margin:0px auto;
}
#mainnav {
margin: 0px;
padding: 0px;
list-style-image: none;
list-style-type: none;
}
#mainnav li {
padding: 0px;
float: left;
margin:0px 3px 0px 0px;
}
#mainnav li a:link, #mainnav li a:visited, #mainnav li a:active {
color: #333;
text-decoration: none;
margin: 0px;
display: block;
float: left;
border-bottom:solid 40px #dadada;
padding: 0px;
width: 100px;
height: 20px;
text-align: center;
}
#mainnav li a:hover {
text-decoration: none;
border-bottom:solid 40px #333;
}
#mainnav li a.active:link, #mainnav li a.active:visited, #mainnav li a.active:a$
text-decoration: none;
border-bottom:solid 40px #990000;
}
h4 {
margin:50px auto;
display:block;
text-align:center;
width:200px;
height:30px;
}

นี่คือโค้ด style.css ครับ เมื่อวางเรียบร้อยแล้วให้ทำการ save โดยการกดปุ่ม ctrl+x แล้วกด  y ต่อด้วยปุ่ม Enter เหมือนอย่างเคยครับ เสร็จแล้วสำหรับการสร้างไฟล์ style.css จากนั้นให้ท่านทำการออกไปจาก folder style.css ด้วยคำสั่ง cd .. เพื่อถอยออกมาอยู่ที่ folder control ของเรานะครับ

5. เมื่อเราถอยออกมาอยู่ที่ folder control และวนะครับในขั้นตอนต่อไปจะเป็นการสร้างไฟล์ที่มีชื่อว่า turnon.php เพื่อเป็นหน้า interface ให้กับระบบของเรานั้นเองครับ ให้ท่านใช้คือสั่ง sudo nano turnon.php เพื่อสร้างไฟล์ turnon.php ขึ้นมานั้นเองครับ จากนั้นให้ท่านก็อปโค้ดที่อยู่ด้านล่างนี้ไปวางลงในไฟล์ครับ กระบวนการเหมือนในข้อ4 ทุกประการครับ

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1
$xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html;charset=utf-8″ />
<title>Active button with PHP</title>
<link href=”style/style.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<?php $page = basename($_SERVER[‘SCRIPT_NAME’]); ?>
<div id=”nav”>

<ul id=”mainnav”>

<li>
<a href=”turnon.php” title=”Welcome page”
<?php
if (
$page == ‘turnon.php’
) {
?> class=”active”<?php } ?>
>Turn ON!!</a>
</li>

<li>
<a href=”turnoff.php” title=”About us page”

>Turn OFF!!</a>
</li>
</ul>
<h4>Power ON!!</h4>
</div>
<?php
$a = shell_exec(“echo ‘root_password’ | sudo -u root -S python turnon.py”);
echo $a;
?>
</body>
</html>

โค้ดของ turnon.php ครับ

3
tunon.php

.      ข้อสำคัญนะครับในส่วนที่ผมขีดเส้นใต้สัแดงนั้นคือชื่อไฟล์ tunon.py ที่มันจะไปเรียกมานะครับถ้าชื่อไฟล์ของท่านไม่ตรงกับของผมก็ให้แก้ให้ตรงตามชื่อไฟล์ของท่านนะครับ เช่น ของท่านเป็น on.py ตรงขีดเส้นใต้ก็ให้ท่านเปลี่ยนเป็น on.py เช่นเดียวกันนะครับ จากนั้นก็กด ctrl + x ตามสเต็ปครับ

6. ในขั้นตอนนี้จะเป็นการสร้างไฟล์ turnoff.php วิธีการเหมือนในข้อที่ 5 ทุกประการครับแต่ให้ท่านใส่โค้ดลงไปตามนี้ครับ

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1
$xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html;charset=utf-8″ />
<title>Active button with PHP</title>
<link href=”style/style.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<?php $page = basename($_SERVER[‘SCRIPT_NAME’]); ?>
<div id=”nav”>

<ul id=”mainnav”>

<li>
<a href=”turnon.php” title=”Welcome page”
>Turn ON!!</a>
</li>

<li>
<a href=”turnoff.php” title=”About us page”
<?php
if (
$page == ‘turnoff.php’
) {
?> class=”active”<?php } ?>
>Turn OFF!!</a>
</li>
</ul>
<h4>Turn OFF!!</h4>
</div>
<?php
$a = shell_exec(“echo ‘root_password’ | sudo -u root -S python turnoff.py”);
echo $a;
?>
</body>
</html>

โค้ดของ turnoff.php ให้ท่านทำการตรวจสอบ ที่ขีดเส้นใต้สีแดงเช่นเดียวกับในข้อที่ 5 ด้วยนะครับ เสร็จเรียบร้อยแล้วครับกระบวนการสร้างไฟล์ให้โปรเจคของเราครบทุกไฟล์กันแล้ว แต่…เดี๋ยวก่อนครับอย่าเพิ่งรีบร้อนทดสอบนะครับ ยังเหลืออีก 1 ขั้นตอนสำคัญครับนั่นคือการกำหนดสิทธิ์ให้ php สามารถเข้าไป่านไฟล์ของ python ออกมามาได้ไปดูกันเลยครับ

7. ในขั้นตนอนนี้ผมขอออกตัวไว้ก่อนเลยนะครับว่าต้องใช้ความรอบครอบระมัดระวังการแก้ไฟล์เป็นพิเศษนะครับเพราะจากประสบการณ์ที่ผ่านมาผมเคยแก้ผิดแล้วไม่สามารถเข้ามาแก้ไขอะไรได้อีกเลยจนถึงขั้น ที่ต้อง format SD Card ใหม่กันเลยทีเดียวนะครับ แต่อย่าตกใจไปถ้าท่านทำตามขั้นตอนก็ไม่มีปัญหาครับ ตอนนี้เราอยู่กันที่ folder control นะครับ ให้ท่านใช้คำสั่ง cd ../../.. เพื่อถอยออกไปสามชั้นนะครับ จากนั้นให้ท่านใช้คำสั่ง sudo nano etc/sudoers เพื่อเข้าไปแก้ไขไฟล์นะครับ

4
sudoers

และเมื่อเข้ามาแล้วจะพบหน้าตาดังนี้ครับ

5
www-data ALL=(ALL)

.      เราต้องเปลี่ยนจากเดิมให้เหมือนในบรรทัดที่ขีดเส้นใต้แบบเป๊ะๆ เลยนะครับไม่งั้นจะมีปัญหาในภายหลังได้ โดยเปลี่ยนจากเดิมเป็น www-data ALL=(ALL) จากนั้นก็กด ctrl+x เพื่อ save ตามปรกติครับ

8. ขั้นตอนนี้เป็นที่หลายคนรอคอยมานาน นั่นก็คือการทดสอบระบบนั่นเองครับ ให้ท่านเปิด บราวเซอร์ขึ้นมาแล้วพิม ip/control/turnoff.php เช่น ip ของผมเป็น 192.168.2.145/control/turnoff.php ผมก็จะได้หน้าตาประมาณนี้ครับ

6
test

.      ท่านก็ลอง คลิก  Turn ON!! , Turn OFF!! ดูครับ ว่ามี ERROR ไหมซึ่งถ้าทำตามขั้นตอนก็ไม่น่าจะมี และอยากรู้ว่ามันทำงานได้จริงไหมก็ลอง เปิด Webiopi ขึ้นมาดูครับ จะมีการเปลี่ยนแปลงที่ขา 26 ให้ท่านดูแบบ Real time กันเลยทีเดียวครับ  หรือลองหา Relay มาต่อดูก้ได้ครับ

ดู VDO เพื่อความเข้าใจได้เลยครับ

.      เสร็จเรียบร้อยแล้วครับสำหรับโปรเจคนี้เราลุยกันมาตั้ง 4 ตอนกันเลยทีเดียว หากมีข้อสงสัยประการใด ก็สามารถคอมเม้นไว้ได้เลยครับหรือสามารถพูดคุยกับผมได้ที่ Facebook ครับ ติดตามเนื้อหา (ไร้) สาระ หรือโปรเจคฮาเฮ กับผมได้ในโปรเจคถัดไปนะครับ สำโปรเจคนี้ผมขอจบแต่เพียงเท่านี้นะครับ สวัสดีครับ

หวย หวยออนไลน์ Jetsadabet




Comments

comments