centos.png

在開始本教學前必須把[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

1.JPG

搜尋User就可以看到centos7 httpd的User名稱是apache

2.JPG

在管理者權限(root)下可以打開visudo來設定權限,輸入指令

visudo

3.JPG

在root下方新增

apache ALL=(ALL) NOPASSWD: ALL

4.JPG

這個動作其實很危險,讓從網頁連進來的使用者都有管理者權限(root),而且不需要密碼,所以Raspberry Pi不要放有危險性的資料,以免被駭客入侵

*PHP呼叫Python之CGI

先安裝perl與perl-CGI,輸入指令

yum -y install perl perl-CGI

15.JPG

安裝完成重啟httpd,輸入指令

systemctl start httpd.service

systemctl enable httpd.service

16.JPG

會將寫好的python文字檔放在/var/www/cgi-bin,要在httpd.conf新增在/var/www/cgi-bin資料夾內能使用.py檔,輸入指令

cd /etc/httpd/conf

開啟httpd.conf文件,輸入指令

vi httpd.conf

1.JPG

搜尋到<Directory "/var/www/cgi-bin">,新增

Options +ExecCGI

AddHandler cgi-script .cgi .pl .py

18.JPG

將目錄切換到/var/www/cgi-bin,輸入指令

cd /var/www/cgi-bin

新建cgiLed.py文件,輸入指令

vi cgiLed.py

5.JPG

程式如下,

#!/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:])

6.JPG

儲存後離開,cgiLed.py需要更改權限才能使用,輸入指令

sudo chmod 777 cgiLed.py

可輸入指令

ls

ll

來檢視

7.JPG

切換目錄到/var/www/html,新建led.php,輸入指令

cd /var/www/html

vi led.php

8.JPG

程式如下,

<?PHP
    echo shell_exec("sudo /var/www/cgi-bin/cgiLed.py -x ".$_GET["x"]." -y ".$_GET["y"]);
?>

9.JPG

儲存後離開,就可以進行測試了,在遊覽器上方輸入,

http://192.168.0.107/led.php?x=on&y=off

10.JPG

S__56098820.jpg

http://192.168.0.107/led.php?x=off&y=on

11擷取.JPG

S__56098821.jpg

*jquery與jquery ui的安裝與使用

連結至jquery ui官網

jquery ui官網

複製紅色框網址

1.jpg

使用wget下載至/var/www/html資料夾內,輸入指令

wget https://jqueryui.com/resources/download/jquery-ui-1.12.1.zip

2.JPG

由於centos7沒有解zip的軟體,需要下載安裝,輸入指令

yum -y install zip unzip

4.JPG

進行解壓縮,輸入指令

unzip jquery-ui-1.12.1.zip

5.JPG

建立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>

12.JPG

13.JPG

14.JPG

儲存後離開,就可以進行測試了

20.JPG

S__56098820.jpg

21.JPG

S__56098823.jpg

arrow
arrow

    鄭智遠 發表在 痞客邦 留言(0) 人氣()