在開始本教學前必須把[Raspberry Pi學習筆記]Raspberry Pi 3 CentOS 7 - Python,[Raspberry Pi學習筆記]Raspberry Pi 3 CentOS 7 - RPi.GPIO,[Raspberry Pi學習筆記]Raspberry Pi 3 CentOS 7 - Python帶參數執行LED控制這三篇搞定才能進行,本篇有三個部分,
1. apache權限設定
2. PHP呼叫Python之CGI
3. jquery與jquery ui的安裝與使用
*apache權限設定
首先要知道centos7 httpd的User名稱,要去看httpd.conf文件,將目錄切換到/etc/httpd/conf,輸入指令
cd /etc/httpd/conf
開啟httpd.conf文件,輸入指令
vi httpd.conf
搜尋User就可以看到centos7 httpd的User名稱是apache
在管理者權限(root)下可以打開visudo來設定權限,輸入指令
visudo
在root下方新增
apache ALL=(ALL) NOPASSWD: ALL
這個動作其實很危險,讓從網頁連進來的使用者都有管理者權限(root),而且不需要密碼,所以Raspberry Pi不要放有危險性的資料,以免被駭客入侵
*PHP呼叫Python之CGI
先安裝perl與perl-CGI,輸入指令
yum -y install perl perl-CGI
安裝完成重啟httpd,輸入指令
systemctl start httpd.service
systemctl enable httpd.service
會將寫好的python文字檔放在/var/www/cgi-bin,要在httpd.conf新增在/var/www/cgi-bin資料夾內能使用.py檔,輸入指令
cd /etc/httpd/conf
開啟httpd.conf文件,輸入指令
vi httpd.conf
搜尋到<Directory "/var/www/cgi-bin">,新增
Options +ExecCGI
AddHandler cgi-script .cgi .pl .py
將目錄切換到/var/www/cgi-bin,輸入指令
cd /var/www/cgi-bin
新建cgiLed.py文件,輸入指令
vi cgiLed.py
程式如下,
#!/usr/bin/python
import RPi.GPIO as GPIO
import sys,getopt
GPIO.setmode(GPIO.BCM)
GPIO.setwarnings(False)
GPIO.setup(4,GPIO.OUT)
GPIO.setup(17,GPIO.OUT)
def main(argv):
input4=''
input17=''
try:
opts,args = getopt.getopt(argv,"hx:y:")
except getopt.GetoptError:
print "cgiOne.py -x <on/off> -y <on/off>"
sys.exit()
for opt,arg in opts:
if opt == '-h':
print "cgiOne.py -x on -y off"
sys.exit()
elif opt in ("-x"):
input4 = arg
elif opt in ("-y"):
input17 = arg
if input4.upper()=="ON":
print("GPIO4 ON")
GPIO.output(4,1)
else:
print("GPIO4 OFF")
GPIO.output(4,0)
if input17.upper()=="ON":
print("GPIO17 ON")
GPIO.output(17,1)
else:
print("GPIO17 OFF")
GPIO.output(17,0)
if __name__ == "__main__":
main(sys.argv[1:])
儲存後離開,cgiLed.py需要更改權限才能使用,輸入指令
sudo chmod 777 cgiLed.py
可輸入指令
ls
ll
來檢視
切換目錄到/var/www/html,新建led.php,輸入指令
cd /var/www/html
vi led.php
程式如下,
<?PHP
echo shell_exec("sudo /var/www/cgi-bin/cgiLed.py -x ".$_GET["x"]." -y ".$_GET["y"]);
?>
儲存後離開,就可以進行測試了,在遊覽器上方輸入,
http://192.168.0.107/led.php?x=on&y=off
http://192.168.0.107/led.php?x=off&y=on
*jquery與jquery ui的安裝與使用
連結至jquery ui官網
複製紅色框網址
使用wget下載至/var/www/html資料夾內,輸入指令
wget https://jqueryui.com/resources/download/jquery-ui-1.12.1.zip
由於centos7沒有解zip的軟體,需要下載安裝,輸入指令
yum -y install zip unzip
進行解壓縮,輸入指令
unzip jquery-ui-1.12.1.zip
建立index.html,輸入指令
vi index.html
程式如下,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Button - Default functionality</title>
<link rel="stylesheet" href="./jquery-ui-1.12.1/jquery-ui.css">
<script src="./jquery-ui-1.12.1/external/jquery/jquery.js"></script>
<script src="./jquery-ui-1.12.1/jquery-ui.js"></script>
<script>
$(function(){
var led_4='off',led_17='off';
$("input").click( function(event){
if(event.currentTarget.name=="x"){
if(led_4=='on'){
led_4 = 'off';
}else{
led_4 = 'on';
}
}
if(event.currentTarget.name=="y"){
if(led_17=='on'){
led_17 = 'off';
}else{
led_17 = 'on';
}
}
$.ajax({
type: 'GET',
url: 'led.php',
data: "x="+led_4+"&y="+led_17,
dataType: 'text',
success: function(data, textStatus){
document.getElementById("message").textContent = data;
},
error: function(xhr, ajaxOptions, thrownError){
},
complete: function(XMLHttpRequest, textStatus){
},
beforeSend: function(XMLHttpRequest){
}
});
});
});
</script>
</head>
<body>
<div>
<input type="button" name="x" value="LED ONE">
<input type="button" name="y" value="LED TWO">
<div id="message"></div>
</div>
</body>
</html>
儲存後離開,就可以進行測試了
留言列表
