2020/7/28 라즈베리 파이

HTML(HyperText Markup Language)

웹페이지를 구성하는 마크업 언어

자바 스크립트,CSS 등을 같이 사용하여 본문과 외관의 배치를 정의할 수 있습니다.

HTML은 기본적으로 요소로 구성 되어 있습니다.

요소는 시작 태그와 종료 태그의 쌍으로 구성 되어 있습니다.

태그는 <>(꺾쇠 괄호)로 둘러싸인 키워드입니다.

태그의 기본적인 형태

<head>

<title>제목</title>

</head>

주요 HTML 요소

<br> : 줄 바꾸기

<p> : 단락 바꾸기

<hr> : 가로줄

<center> ... </center> : 가운데 정렬

<font> ... </font> : 폰트 변경

<ul><li> ... <li> ... </ul> : 순서없는 목록(동그라미)

<ol><li> ... <li> ... </ol> : 순서있는 목록(숫자)

<table> ... </table> : 표 만들기

<tr> ... </tr> : 행

<td> ... </td> : 열

HTML은 하이퍼텍스트를 지원합니다.

하이퍼텍스트(Hypertext)란 쉽게 말해 링크(Link)입니다. (하이퍼링크)

보통 블로그에 글을 써서 링크를 걸거나, 웹사이트에서 링크를 걸면 파란색으로 글씨가 바뀌고 밑줄이 그입니다.

요거 < 이게 바로 하이퍼텍스트입니다.

HTML에서는 a태그를 사용하여 하이퍼텍스트를 사용할 수 있습니다.

<a> ... </a> 이런식으로 사용합니다.

https://www.codingfactory.net/10221

HTML / 문법

문법 Contents 위 모든 걸 요소(element)라고 합니다. 을 시작 태그, 을 종료 태그, 둘을 합쳐 태그(tag)라고 합니다. Contents는 내용입니다. 예를 들어

Lorem

는 p 요소라 �

www.codingfactory.net

위에 사이트에가면 더 자세한 내용을 볼수 있다.

cd webapps/ch06/helloworld으로 이동

vi app_start.py로 들어간다

<head><title>주수홍 잘생겼다</title></head>를 넣는다.

어디에?? 밑에 그림에 처럼 넣으면

이렇게 나온다.

이번에는 내용까지 넣어볼까 합니다.

밑에 그림과 같이 넣으면

이렇게 나온다.

이번에는 그림과 내용을 넣어볼까한다.

vi app_start.py에 들어가서 밑에 내용을 넣는다.

그러면 이렇게 나온다.

vi app_start.py에 들어가서 밑에 내용을 넣는다.

이렇게 나온다.

Flask 라우팅

flask에서 URI을 처리하는 방법을 다른 말로 URI 디스패치라 합니다.

디스패치는 아주 단순한 일을 합니다.

사용자가 입력한 URI를 분석하여 올바른 길로 안내하는 역할을 합니다.

뷰 데코레이션을 통해서 뷰 함수를 생성하여 올바른 길로 안내해주는 역할을 합니다.

이 내용을 vi app_start3.py에 넣는다

허나 밑에꺼(Flask LED제어)와 다른거는 GPIO.output내용은 지우고 하면 밑에 웹 내용이 나온다.

이대로 하면 LED제어하는 내용이다.

웹 브라우저를 열어서 실행하면 다음과 같습니다.

Flask LED 제어하기

정적 라우팅

밑에 코드를 vi app_start3.py에 넣는다

동적 라우터 내용이다

밑에 코드를 vi app_start3.py에 넣는다

그리고 라즈베리 파이와 브레드보드에 LED랑 저항 등을 연결한다.

웹브라우저를 통해서 확인을 할수 있다.

192.168.0.169:5000/led/on 하면 켜지고

192.168.0.169:5000/led/off 하면 꺼진다.

자세한 내용은 전날 내용에서 확인할수 있다.

예를 들어서 /dkfjlksdjf/dkfjslkd/dfsaf 이 있다고 가정한다.
/를 라우터라고 한다.

밑에 코드를 vi app_start3.py에 넣는다

이 코드가 최종본이다.

python app_start3.py로 실행하고 나서 웹브라우져를 켠다.

192.168.0.169:5000/led/ 뒤에 4가지를 넣어서 확인할수 있다.

Flasck 웹페이지

이런 폴더 구조를 만든다.

/home/pi/webapps/ch06/home/index.py의 내용이다.

/home/pi/webapps/ch06/home/templates/index.html의 내용이다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>HOME NETWORK</title>
    <link rel="stylesheet" href="{{url_for('static', filename = 'style.css')}}" />
</head>
<body>
    <div class="container">
        <div class="header">
            <h2>HOME IOT</h2>
        </div>
        <div class="main">
            <div>
                <button onclick="led_on()">LED ON</button>
            </div>
            <div>
                <button onclick="led_off()">LED OFF</button>
            </div>
        </div>    
        <div id="result">

        </div>
    </div>
    <script>
        function led_on() {
            fetch("/led/on")
                .then(response => response.text())
                .then(data => {
                    console.log(data);
                    let result = document.querySelector("#result");
                    if (data == "ok") {
                        result.innerHTML = "<h1>LED is runinng</h1>";
                    } else {
                        result.innerHTML = "<h1>error</h1>";
                    }
                });
        }
        function led_off() {
            fetch("/led/off")
                .then(response => response.text())
                .then(data => {
                    console.log(data);
                    let result = document.querySelector("#result");
                    if (data == "ok") {
                        result.innerHTML = "<h1>LED is stopping</h1>";
                    } else {
                        result.innerHTML = "<h1>error</h1>";
                    }
                });
        }
    </script>
</body>
      
</html>

/home/pi/webapps/ch06/home/static/style.css의 내용이다.

python index.py를 치면서 구동을 한다.

웹브라우져(192.168.0.169:5000)로 들어가면 이렇게 나온다.

LED ON을 클릭하면 LED is runninng이라고 뜨면서 불이 들어온다.

LED OFF을 클릭하면 LED is stopping이라고 뜨면서 불이 꺼진다.

Tip

cd ./은 지금 위치로 이동

cd ../은 지금 폴더의 상위 폴더로 이동

fetch() 함수

intdex, html 코드에서 fetch라는 문법이 나오게 됩니다.

자바스트립 문법입니다. ajax를 이용한 비동기 통신을 할 때 사용하는 라이브러리입니다.

예전에는 ajax 요청 시에 jQuery를 많이 사용하였는데 최근에는 자바스크립트가 제공해주는 fetch를 많이 사용합니다.

Ajax

▶ Ajax란?

Ajax는 JavaScript의 라이브러리중 하나이며 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자입니다. 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법 이며 Ajax를 한마디로 정의하자면 JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이라고 할 수 있겠습니다.

※ 비동기(async)방식이란?

비동기 방식은 웹페이지를 리로드하지 않고 데이터를 불러오는 방식입니다. 이 방식의 장점은 페이지 리로드의 경우 전체 리소스를 다시 불러와야하는데 이미지, 스크립트 , 기타 코드등을 모두 재요청할 경우 불필요한 리소스 낭비가 발생하게 되지만 비동기식 방식을 이용할 경우 필요한 부분만 불러와 사용할 수 있으므로 매우 큰 장점이 있습니다.

▶ 왜 사용하는가?

기본적으로 HTTP프로토콜은 클라이언트쪽에서 Request를 보내고 Server쪽에서 Response를 받으면 이어졌던 연결이 끊기게 되어있습니다. 그래서 화면의 내용을 갱신하기 위해서는 다시 request를 하고 response를 하면서 페이지 전체를 갱신하게 됩니다. 하지만 이렇게 할 경우 페이지의 일부분만 갱신할 경우에도 페이지 전체를 다시 로드해야하는데 엄청난 자원낭비와 시간낭비를 초래하고 말것입니다. 하지만 ajax는 html 페이지 전체가아닌 일부분만 갱신할수 있도록 XML HttpRequest객체를 통해 서버에 request를 합니다. 이 경우 Json이나 xml형태로 필요한 데이터만 받아 갱신하기 때문에 그만큼의 자원과 시간을 아낄 수 있습니다. 요새 웹페이지에서 가장 중요한것은 속도가 아닐까싶습니다. 이 이유하나만으로도 Ajax를 사용해야 하는 이유로써 충분합니다.

▶Jquery와의 시너지

Ajax하면 Jquery에 대한 설명을 빼놓을 수 없습니다. 일반 Javascript만으로 Ajax를 하게되면 코딩량도 많아지고 브라우저별로 구현방법이 다른 단점이 있는데 jquery를 이용하면 더 적은 코딩량과 동일한 코딩방법으로 대부분의 브라우저에서 같은 동작을 할 수 있게 됩니다. jquery ajax를 사용하면, HTTP Get방식과 HTTP Post방식 모두를 사용하여 원격 서버로부터 데이터를 요청할 수 있습니다. Jquery는 Ajax처럼 JavaScript의 라이브러리 중 하나인데 자바스크립트를 좀 더 사용하기 쉽게 패키징화 시켜놓은 것입니다. Jquery에대한 내용은 추후에 포스팅하겠습니다.

'스마트팩토리 > 라즈베리파이' 카테고리의 다른 글

2020/7/30 라즈베리파이 (0)	2020.07.30
2020/7/29 라즈베리 파이 (0)	2020.07.30
2020/07/27 라즈베리 파이 (0)	2020.07.27
2020/07/24 라즈베리 파이 (0)	2020.07.24
라즈베리파이3 B+ 내장(Built in) WIFI 끊김 해결 방안 (0)	2020.07.24

배움의 장터