1 - https://wei48221.blogspot.tw/2017/08/raspberry-pi-installation-and.html
2 - https://wei48221.blogspot.tw/2017/08/raspberry-pi-how-to-check-installed.html
3 - https://wei48221.blogspot.tw/2017/08/raspberry-pi-how-to-install-mqtt-broker.html
4 - https://wei48221.blogspot.tw/2017/08/mariadb-create-new-database-using.html
5 - https://wei48221.blogspot.tw/2017/08/raspberry-pi-setting-up-mqtt-to-send.html
6 - https://wei48221.blogspot.tw/2017/08/raspberry-pi-setting-up-mqtt-to-send_29.html
--------------------------------------------------------------------------------------------------------------------------
1. Clone the file at https://github.com/shaneyake/shaneyake/tree/master/HAC.-7-MQTT-to-Webpages-Part-2.
Below is the content of control.php
<?php if($run!='test:code'){die();} ?> <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Control</title> <script language="javascript" type="text/javascript"> function init() { doConnect(); } function doConnect() { websocket = new WebSocket("ws://"+document.domain+":8080/"); websocket.onopen = function(evt) { onOpen(evt) }; websocket.onclose = function(evt) { onClose(evt) }; websocket.onmessage = function(evt) { onMessage(evt) }; websocket.onerror = function(evt) { onError(evt) }; } function onOpen(evt) { console.log("connected\n"); } function onClose(evt) { console.log("disconnected\n"); } function onMessage(evt) { console.log(evt.data); var obj = JSON.parse(evt.data); if(obj['mode']=="login"){ websocket.send('{"mode": "login", "ws_token":"<?php echo $_SESSION["WS_TOKEN"]; ?>"}'); }else{ } } function onError(evt) { console.log("ERROR"); websocket.close(); } window.addEventListener("load", init, false); function sendSub(topic) { var array_temp={}; array_temp['mode']="subscribe"; array_temp['topic']=topic; websocket.send(JSON.stringify(array_temp)); } function sendPub(topic,message) { var array_temp={}; array_temp['mode']="publish"; array_temp['topic']=topic; array_temp['message']=message; websocket.send(JSON.stringify(array_temp)); } function sendRGB(color,value){ var array_temp={}; array_temp[color]=value; sendPub('hello/world',array_temp); } function sendButtonPress(value){ var array_temp={}; array_temp['STATE']=value; sendPub('hello/world',array_temp); } </script> </head> <body> Control<br> <a href="/?p=logout">Log Out</a> <br> <br> RED___:<input type="range" id="myRange" value="90" min="0" max="255" onChange="sendRGB('RED',this.value)"><br> GREEN:<input type="range" id="myRange" value="90" min="0" max="255" onChange="sendRGB('GREEN',this.value)"><br> BLUE__:<input type="range" id="myRange" value="90" min="0" max="255" onChange="sendRGB('BLUE',this.value)"><br> <br> <button onClick="sendButtonPress(1)">ON</button><br> <button onClick="sendButtonPress(0)">OFF</button><br> <button onClick="sendButtonPress('T')">TOGGEL</button><br> </body> </html>
2. Copy the file to the "/var/www/html" directory of the Raspberry Pi that hosts the MariaDB, phpMyAdmin, and MQTT broker.
pi@raspberrypi:/var/www/html $ ls control.php index.php login_proccess.php dashboard.php login.php logout.php
3. To make the control page the default page to display after user log in. Edit "login_proccess.php" by changing url=?p=dashboard to url=?p=control.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | <?php if($run!='test:code'){die();} $username = $_POST['usr']; $username = strtolower($username); $usernamemd5=md5($username); $password = $_POST['pwd']; $passwordmd5=md5($password); if ($username&&$password){ //start if 1 $conn = new mysqli($MYSQL_SERVER, $MYSQL_USERNAME, $MYSQL_PASSWORD, $MYSQL_DATABASE); mysql_connect($MYSQL_SERVER,$MYSQL_USERNAME,$MYSQL_PASSWORD); @mysql_select_db($MYSQL_DATABASE) or die( "Unable to select database"); $query="SELECT * FROM accounts WHERE md5_username ='$usernamemd5'"; $result=mysql_query($query); $numrows=mysql_numrows($result); if ($numrows!=0){ //start if 2 $i=0; while ($i < $numrows) { //start while 1 $dbusername = mysql_result($result,$i,"username"); $dbmd5_username = mysql_result($result,$i,"md5_username"); $dbpassword = mysql_result($result,$i,"password"); $dbgetid=mysql_result($result,$i,"id"); $dblogin_period=mysql_result($result,$i,"login_period"); $i++; } if ($usernamemd5==$dbmd5_username&&$passwordmd5==$dbpassword) { //start if 3 $newkey = uniqid(); $newkeymd5=md5($newkey); $WS_token = md5($dbgetid.$newkey); $newexpiry_date = date('Y-m-d h:i:s', time()+(86400 * $dblogin_period)); $_SESSION["USER_VAILD"]= "vaild"; $_SESSION["USER_NAME"] = $dbusername; $_SESSION["USER_NAME_KEY"] = $dbmd5_username; $_SESSION["WS_TOKEN"] = $WS_token; $sql="INSERT INTO logins (id, md5_username, expiry_date, WS_token, active) VALUES (NULL, '$dbmd5_username', '$newexpiry_date', '$WS_token' , '1' )"; mysqli_query($conn, $sql) or die("Couldn't Create Key"); echo("Logging in...<meta http-equiv='refresh' content='1; url=?p=dashboard' />"); } else { //close if 3 echo("Username or Password Incorrect"); } }else{//close if 2 echo("User Doesn't Exsit..."); } }else{//close if 1 echo("No Username or Password"); } ?> <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Logging in...</title> </head> <body> </body> </html> |
The control page is now the default page after user log in.
The $page='dashboard' in index.php could be changed to $page='control' so that the control panel is displayed.
pi@raspberrypi:/var/www/html $ cat index.php <?php session_start();$run='test:code'; $MYSQL_SERVER='localhost'; $MYSQL_USERNAME='web'; $MYSQL_PASSWORD='Ztx47yVEXKQ5LY2c'; $MYSQL_DATABASE='HAC'; $page='control'; if($_SESSION["USER_VAILD"] == "vaild"){ if($_GET['p']!=''){$page=$_GET['p'];} }else{ $page="login"; if($_GET['p']=='login_proccess'){$page='login_proccess';} } include $page.'.php'; ?>
Reference:
HAC 7. MQTT to Webpages Part 2
https://youtu.be/zjIcYwt_kXw
HTML5 and CSS3 beginners tutorials:
https://www.youtube.com/playlist?list=PL41lfR-6DnOruqMacTfff1zrEcqtmm7Fv
Javascript beginner tutorials:
https://www.youtube.com/playlist?list=PL41lfR-6DnOrwYi5d824q9-Y6z3JdSgQa
No comments:
Post a Comment