TechTogetWorld


 daviduino.co.kr

techtogetworld.com

 david201207.blog.me

cafe.naver.com/3dpservicedavid



장고,python을 pythonanywhere로 인터넷 배포하는 과정입니다.


http://http://david201207.pythonanywhere.com/




1.CAR : 정상작동

자바스크립트_CANVAS

2.그래프 : 정상작동

MATPLOT_MPLD3

3.쓰기/일기 : 정상작동

HTML/자바스크립트

4. 덧셈

1)개인pc local서버로 실행시(장고) 정상동작함

2) web으로 동작시 에러(502)  ==> 에러 발생


[tensorflow code]


from django.shortcuts import render

from tensorapp.forms import *

from django.http import HttpResponse


def tensorapp(request):

    import tensorflow as tf

    sess = tf.Session()

    a = tf.constant(2)

    b = tf.constant(3)

    c = a + b

    html_fig=sess.run(c)

    return render(request, "tesorprojd/gameexe.html", {'active_page' : 'gameexe.html', 'div_figure' : html_fig})






5. 단 덧셈을 cosoles 로 실행하면  결과값이 5로 정상 계산되어 나옴.다만, 상단에 경고메세지가 나오기는 하지만, 결과값은 정상으로 5가 출력됨






 daviduino.co.kr

techtogetworld.com

 david201207.blog.me

cafe.naver.com/3dpservicedavid



1.그래프,그래픽,수학공식등을 시각화 함으로써, 머신러닝에 대한 이해도 증대코자 합니다.


2. 개인PC로 구현한 머신러닝을 모든사람들이 같이 공유할수있도록 인터넷서버상에서 구현하고,

   이를 인터넷 서비스로 연계를 하기위해 필요한 과정입니다.



구현상에 몇가지 이슈가 있는부분은 청색으로 구분을 했습니다.

특정 프로그램이나, 서비스에 문제가 있다기 보다는, 저의 공부가 부족함이니, 오해는 없으시길 바랍니다.

글 읽으시는 분중에서 좋은 해결책이  있으신분은 조언을 해주시면 감사하겠습니다.



-------------------------------

1.동작시현

http://daviduino.pythonanywhere.com


2. 파이선의 pygame 모듈로 간단한 게임을 만들었습니다.
   우측에서 달려오는 거미를 비행기가 총으로 쏴서 맞춰서, 소년을 보호하는 게임입니다.
   바람님의 동영상 강의를 참고해서, 그림정도만 변경했습니다.

3. 게임을 "장고 django " 의 한 app으로 등록을 했습니다.
   장고서버에서 동작이 됨을 확인했습니다.
   - 추후 확인이 필요한 사항 
      .   pygame.time.get_ticks() 동작상의 이슈
   .. 파이선 단독으로 동작시에는 정상 동작을 함 ==> pygame.quit / sys.exit() 로 종료를 하고, 재 실행하면  시간이 다시 처음부터 카운팅이 잘 작동함.
   .. 장고서버에 동작시에 
      1)게임 종료시( pygame.quit / sys.exit()) 서버에러 발생함
      2)서버에러 무시하고 다시 게임을 가동면, 시간이 재셋팀되지 않고, 시간이 이어져서 카운팅이 됨,
        결국 서버를 종료시키고, 다시 게임을 실행해야만  시간이 0부터 다시 카운팅이 되는 문제가 있었음.

 

4. 장고상의 게임을 pythonwhere 로 배포(인터넷 등록)을 시도함.
- 추후 확인 필요사항 
.pygame 모듈은 지원이 않되는것으로 보여짐.

5. pygame을 배포하는데 문제가 있음을 확인하고, 자바스크립트를 이용해서 간단한 게임(?!?)을 작성함

6. 자바스크립트로 작성한 게임을  장고로 등록하고, 이를 pythonwhere 로 인터넷 배포함
정상작동함 ( 방향키로 , 자동차를 동서남북으로 움직임)


7. 파이선으로 간단한 텐서플로우 프로그램을 작성함 ( hellow world !!)

   장고로 등록하고, 본인 pc를 서버로 하면 잘 동작함

   - 추후 확인이 필요한 사항 

     . pythonwhere로  인터넷에 배포시에 텐서플로우가 잘 동작치 않음

     . pythonwhere의 python consoles에는 tensorflow가 기본 장착이 되어있어서, 무리없이 잘 동작을 하는데,

       web으로 등록하기 위해 bash console에 가상환경을 설치합니다, 이때 가상환경상에는 tensorflow 모듈이 없는것 같습니다.

       가상환경하에서 tensorflow를 설치하려고 하면, 용량이 부족하다면서 설치가 않됩니다.

        결국 텐서플로우를 적용한 프로그램을 web으로 배포하지 못함, 추후 다른방법 모색필요함.



8. 참고자료

https://youtu.be/iPE0cJKjOnw


 daviduino.co.kr

techtogetworld.com

 david201207.blog.me

cafe.naver.com/3dpservicedavid


투표관련 웹 "vote" Django WEB을 통해 장고의 기능을 확인해 가는 과정입니다.

글의 순서는 아래와 같습니다.


===========================================================================

1. Page Not Found 404 발생시키는 방법
2. Page Not Found 404 발생시 다른 화면으로 넘기는 방법
3. templates 상속으로 코드 분량 줄이기
4. 네비게이션바 코드
  - 각 페이지의 공통 내용을 네비게이션에 등록
5. 화일 사용하기 : 아이콘 화일 적용
6. Ddjango web 시현 : pythonanywhere
7. 소스
8 참고자료

===========================================================================



[ Page Not Found 404 발생시키는 방법]


1. 예외 처리로 object가 없는 경우 HttpResponseNotFound 처리하기

# C:\Code\mysite\elections\views.py


from django.http import HttpResponseNotFound #추가


# 기존 코드 유지


def candidates(request, name):

    try :

        candidate = Candidate.object.get(name = name)

    except:

        return HttpResponseNotFound("없는 페이지 입니다.")

    return HttpResponse(candidate.name)

2. 예외 처리로 url이 없는 경우와, object가 없는 경우를 함께 처리하기

# C:\Code\mysite\elections\views.py


from django.http import Http404 #추가


# 기존 코드 유지


def candidates(request, name):

    try :

        candidate = Candidate.object.get(name = name)

    except:

        raise Http404

    return HttpResponse(candidate.name)

4. 예외 처리없이 url이 없는 경우와, object가 없는 경우를 함께 처리하기

# C:\Code\mysite\elections\views.py


from django.shortcuts import get_object_or_404 #추가


# 기존 코드 유지


def candidates(request, name):

    candidate = get_object_or_404(Candidate, name = name)

    return HttpResponse(candidate.name)


[ Page Not Found 404 발생시 다른 화면으로 넘기는 방법]

1. 디버그 설정과 디렉토리 설정 바꿔주기

# C:\Code\mystie\settings.py


# ...


DEBUG = False #True에서 False로 변경합니다


ALLOWED_HOSTS = ['localhost']


# ...


TEMPLATES = [

    {

        # ...

        'DIRS' : ['templates'],

        # ...

    }

]

2. 404파일 만들어주기

<!--C:\Code\mysite\templates\404.html-->

없는 페이지 입니다.


[ templates 상속으로 코드 분량 줄이기]


1. layout.html 설정

<!-- C:\Code\mysite\elections\templates\elections\layout.html-->


<!DOCTYPE html>

<html lang="en">

<head>

  <title>{% block title %}{% endblock %}</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>

<body>

{% block content %}{% endblock %}

</body>

</html>

2. 각 html파일에 layout.html 상속받기

1. index.html

<!DOCTYPE html>부터 </head>까지 삭제

<body>, </body>, </html> 태그 제거

<!-- C:\Code\mysite\elections\templates\elections\index.html-->


{% extends "elections/layout.html" %}

{% block title %}

선거 후보

{% endblock %}


{% block content %}


<!-- 기존 코드 유지.

    <div class = "container">로 시작하고 </table>로 끝납니다.-->


{% endblock %}


2. area.html

<!DOCTYPE html>부터 </head>까지 삭제

<body>, </body>, </html> 태그 제거

<!-- C:\Code\mysite\elections\templates\elections\area.html-->

{% extends "elections/layout.html" %}


{% block title %}

{{area}}

{% endblock %}


{% block content %}


<!-- 기존 코드 유지.

    <div class = "container">로 시작하고 </div>로 끝납니다.-->


{% endblock %}

3. result.html

<!DOCTYPE html>부터 </head>까지 삭제

<body>, </body>, </html> 태그 제거

<!-- C:\Code\mysite\elections\templates\elections\result.html-->

{% extends "elections/layout.html" %}


{% block title %}

{{area}} 여론조사 결과

{% endblock %}


{% block content %}


<!-- 기존 코드 유지.

    <div class = "container">로 시작하고 </div>로 끝납니다.-->


{% endblock %}



[네비게이션바 코드]


1. layout 추가하기

<!-- C:\Code\mysite\elections\templates\elections\layout.html -->


<!--기존 코드 -->

<body>

<nav class="navbar navbar-default">

  <div class="container-fluid">

    <div class="navbar-header">

      <a class="navbar-brand" href="{% url 'elections:home' %}">사이트명</a>

    </div>

  </div>

</nav>

<!--기존 코드 -->

2. url설정

# C:\Code\mysite\elections\urls.py

# 기존 코드 유지

app_name = 'elections'

urlpatterns = [

    url(r'^$', views.index, name = 'home')

    # 기존 코드 유지


[화일 사용하기]


1. 아이콘 적용하기

   1) static 파일은 DEBUG = true  상태에서 사용가능:C:\Code\mysite\mysite\settings.py 에서 DEBUG =true

   2) C:\Code\mysite\elections\static\elections =>favicon 그림화일 저장

   3) 경로 추가하기

<!-- C:\Code\mysite\elections\layout.html -->

{% load staticfiles %} <!-- 추가 -->


<!--기존 유지 <head> 태그 아래 코드추가>

    <link rel ="shortcut icon" type = "image/x-icon" href="{% static 'elections/favicon.ico' %}" />


[소스코드]

20170916 2 vote.zip



[참고자료]




 daviduino.co.kr

techtogetworld.com

 david201207.blog.me

cafe.naver.com/3dpservicedavid


투표관련 웹 "vote" Django WEB을 통해 장고의 기능을 확인해 가는 과정입니다.

글의 순서는 아래와 같습니다.


===========================================================================

1. 투표결과 나타내기

2. 투표기간 동적으로 표현하기

3. 지지율 동적으로 표현하기

4. 참고자료

===========================================================================



[ 투표결과 나타내기]


1. 투표결과 표현형  templates 만들기

    <!--C:\Code\mysite\elections\templates\elections\result.html -->

<!DOCTYPE html>

<html lang="en">

<head>

  <title>지역구 여론조사 결과</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

<h1>지역구</h1>

<br>

<table class="table table-striped">

    <thead>

    <tr>

        <td><B>기간</B></td>

        <td><B>후보1</B></td>

        <td><B>후보2</B></td>        

    </tr>

    </thead>

    <tbody>

    <tr>

        <td> 기간1 </td>

        <td> 후보1 지지율</td>

        <td> 후보2 지지율</td>

    </tr>    

    <tbody>

</table>

</div>

</body>



2. URL을 투표결과로 연결하기

# C:\Code\mysite\elections\urls.py

from django.conf.urls import url

from . import views


urlpatterns = [

    url(r'^$', views.index),

    url(r'^areas/(?P<area>[가-힣]+)/$', views.areas), 

    url(r'^areas/(?P<area>[가-힣]+)/results$', views.results), 

    url(r'^polls/(?P<poll_id>\d+)/$', views.polls),

]


3. 투표후 투표결과 result위치값을 을 리턴하기/투표결과 함수를 정의하기

# C:\Code\mysite\elections\views.py


# 기존 import 유지

from django.http import HttpResponseRedirect


# def index(request) 유지


def polls(request, area):

    #...

    #return HttpResponse("finish") #여기 지우고

    return HttpResponseRedirect("/areas/{}/results".format(poll.area))



def results(request, area):

    return render(request, 'elections/result.html', )



[ 투표기간 동적으로 표현하기]


1. view.py 수정


 C:\Code\mysite\elections\views.py


def results(request, area):

    candidates = Candidate.objects.filter(area = area)

    polls = Poll.objects.filter(area = area)

    poll_results = []

    for poll in polls:

        result = {}

        result['start_date'] = poll.start_date

        result['end_date'] = poll.end_date


        poll_results.append(result)


    context = {'candidates':candidates, 'area':area,

    'poll_results' : poll_results}

    return render(request, 'elections/result.html', context)



2. view.py 수정

<html lang="en">

<head>

  <title>{{area}} 여론조사 결과</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

<h1>{{area}}</h1>

<br>

<table class="table table-striped">

    <thead>

    <tr>

        <td><B>기간</B></td>

        {% for candidate in candidates %}

        <td><B>{{candidate.name}}</B></td>

        {% endfor %}

    </tr>

    </thead>

    <tbody>

    {% for result in poll_results %}

    <tr>

        <td> {{result.start_date.year}}/{{result.start_date.month}}/{{result.start_date.day}}~{{result.end_date.year}}/{{result.end_date.month}}/{{result.end_date.day}} </td>

        <td> 후보1 지지율</td>

        <td> 후보2 지지율</td>

    </tr>

    {% endfor %}

    <tbody>

</table>

</div>

</body>



[ 지지율 동적으로 표현하기]


1.views.py 수정


# C:\Code\mysite\elections\views.py

# 여론조사 결과보기2에 Contact모델과 이어지는 views.py


def results(request, area):

    candidates = Candidate.objects.filter(area = area)

    polls = Poll.objects.filter(area = area)

    poll_results = []

    for poll in polls:

        result = {}

        result['start_date'] = poll.start_date

        result['end_date'] = poll.end_date


        # poll.id에 해당하는 전체 투표수

        total_votes = Choice.objects.filter(poll_id = poll.id).aggregate(Sum('votes'))

        result['total_votes'] = total_votes['votes__sum']


        rates = [] #지지율

        for candidate in candidates:

            # choice가 하나도 없는 경우 - 예외처리로 0을 append

            try:

                choice = Choice.objects.get(poll = poll, candidate = candidate)

                rates.append(

                    round(choice.votes * 100 / result['total_votes'], 1)

                    )

            except :

                rates.append(0)

        result['rates'] = rates

        poll_results.append(result)


    context = {'candidates':candidates, 'area':area,

    'poll_results' : poll_results}

    return render(request, 'elections/result.html', context)


2.result.html 수정

<!-- C:\Code\mysite\elections\templates\elections\result.html -->

<!DOCTYPE html>

<html lang="en">

<head>

  <title>{{area}} 여론조사 결과</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

<h1>{{area}}</h1>

<br>

<table class="table table-striped">

    <thead>

    <tr>

        <td><B>기간</B></td>

        {% for candidate in candidates %}

        <td><B>{{candidate.name}}</B></td>

        {% endfor %}

    </tr>

    </thead>

    <tbody>

    {% for result in poll_results %}

    <tr>

        <td> {{result.start_date.year}}/{{result.start_date.month}}/{{result.start_date.day}}~{{result.end_date.year}}/{{result.end_date.month}}/{{result.end_date.day}} </td>

        {% for rate in result.rates %}

        <td> {{rate}}%</td>

        {% endfor %}

    </tr>    

    <tbody>

    {% endfor %}

</table>

</div>

</body>




[ 참고자료]



 daviduino.co.kr

techtogetworld.com

 david201207.blog.me

cafe.naver.com/3dpservicedavid


기존에 작성했던 투표관련 웹 "vote" Django WEB 을  pythonanywhere에 배포하는 과정입니다.

특히 디렉토리 구조에 신경쓰지 않으면, 배포시 에러가 발생하므로, 유심히 볼 필요가 있습니다.

글의 순서는 아래와 같습니다.


===========================================================================

[ 배포하기]==> PythonAnywhere
1. GIT, GITHUB를 설치하고, 저장소를 만들어서 저장한다
2. GitHub에서 PythonAnywhere로 코드 가져오기
3. PythonAnywhere에서 가상환경(virtualenv) 생성하기
4. PythonAnywhere에서 데이터베이스 생성하기
5. web app으로 블로그 배포하기

6. 가상환경(virtualenv) 설정하기

7. WSGI 파일 설정하기

8. 구현된 모습 : 정상작동중

   ==>http://david20120720.pythonanywhere.com/

9. 참고 : pythonanywhere 가입후 자동설치되는 화일 구조

10. source file

vote.zip




[ 참고자료

     https://programmers.co.kr/learn/courses/6

===========================================================================




[ 배포하기]==> PythonAnywhere

1. GIT, GITHUB를 설치하고, 저장소를 만들어서 저장한다

   ==> 참고글 http://daviduino.co.kr/86

  - github에 올려진 형태 : 디렉토리 구조가 틀리면 web 실행시 에러 발생함, 구조를 맞추어야 함.


2. GitHub에서 PythonAnywhere로 코드 가져오기

  - 배시(Bash)" 콘솔을 실행해서, 콘솔화면으로 들어간다

  - PythonAnywhere command-line

   . $ git clone https://github.com/david20120720/vote.git

   . $ tree vote 명령어를 입력  ==> 화일이 제대로 불러와졌는지 확인가능 , 디렉토리 구조가 틀리면 배포시 에러 발생함

PythonAnywhere command-line

$ tree vote

13:27 ~ $ tree vote 

vote

├── db.sqlite3

├── elections

│   ├── __init__.py

│   ├── __pycache__

│   │   ├── __init__.cpython-36.pyc

│   │   ├── admin.cpython-36.pyc

│   │   ├── models.cpython-36.pyc

│   │   ├── urls.cpython-36.pyc

│   │   └── views.cpython-36.pyc

│   ├── admin.py

│   ├── apps.py

│   ├── migrations

│   │   ├── 0001_initial.py

│   │   ├── 0002_auto_20170910_1447.py

│   │   ├── 0003_auto_20170910_1714.py

│   │   ├── __init__.py

│   │   └── __pycache__

│   │       ├── 0001_initial.cpython-36.pyc

│   │       ├── 0002_auto_20170910_1447.cpython-36.pyc

│   │       ├── 0003_auto_20170910_1714.cpython-36.pyc

│   │       └── __init__.cpython-36.pyc

│   ├── models.py

│   ├── templates

│   │   └── elections

│   │       ├── area.html

│   │       └── index.html

│   ├── tests.py

│   ├── urls.py

│   └── views.py

├── manage.py

└── mysite

    ├── __init__.py

    ├── __pycache__

    │   ├── __init__.cpython-36.pyc

    │   ├── settings.cpython-36.pyc

    │   ├── urls.cpython-36.pyc

    │   └── wsgi.cpython-36.pyc

    ├── settings.py

    ├── urls.py

    └── wsgi.py


3. PythonAnywhere에서 가상환경(virtualenv) 생성하기

  - PythonAnywhere command-line

$ cd vote

$ virtualenv --python=python3.6 myvenv

Running virtualenv with interpreter /usr/bin/python3.6

[...]

Installing setuptools, pip...done.

$ source myvenv/bin/activate

(myvenv) $  pip install django~=1.11.0

Collecting django

[...]

Successfully installed django-1.11.3

5분정도 시간이 소요될수 있음


4. PythonAnywhere에서 데이터베이스 생성하기

 - pythonAnywhere command-line

   . (mvenv) $ python manage.py migrate

Operations to perform:

[...]

     Applying sessions.0001_initial... OK

   . (mvenv) $ python manage.py createsuperuser


5. web app으로 블로그 배포하기

  - PythonAnywhere 대시보드 ==>Web==>Add a new web app

  - 도메인 이름을 확정한 후, 대화창에 수동설정(manual configuration)

  - Python 3.6을 선택하고 다음(Next)을 클릭하면 마법사가 종료됩니다.

    . Note "Django"가 아니라  "수동설정(Manual configuration)"을 선택해야함

    . 기본 PythonAnywhere Django 설정을 위해서 이방법이 유리함.



6. 가상환경(virtualenv) 설정하기

 - "가상환경(Virtualenv)" 섹션에서 가상환경 경로를 입력(Enter the path to a virtualenv) ==> /home/david20120720/vote/myvenv/

    라고 입력

7. WSGI 파일 설정하기

 - "WSGI 설정 파일(WSGI configuration file)" ==> /var/www/<your-username>_pythonanywhere_com_wsgi.py부분) 클릭

 - 모든내용을 삭제==>아래 내용으로 기록

import os

import sys

path = '/home/david20120720/vote/'  # PythonAnywhere 계정으로 바꾸세요. ==> vote까지만 입력한다, mysite 까지 들어가면 에러 발생함.

if path not in sys.path:

    sys.path.append(path)

os.environ['DJANGO_SETTINGS_MODULE'] = 'mysite.settings'

from django.core.wsgi import get_wsgi_application

from django.contrib.staticfiles.handlers import StaticFilesHandler

application = StaticFilesHandler(get_wsgi_application())

8 directories, 32 files


  - 저장=> WEB 클릭

  - 모두 끝았음. RELOAD 및 홈페이지 실행시 웹이 실행됨


8. 구현된 모습 : 정상작동중   



9. 참고 : pythonanywhere 가입후 자동설치되는 화일 구조

    


 10. source file





[ 참고자료]


    


 daviduino.co.kr

techtogetworld.com

 david201207.blog.me

cafe.naver.com/3dpservicedavid


[web sever 구축_파이선_DJANGO #3 ]Django WEB 배포하기


글의 순서는 아래와 같습니다.


===========================================================================


[ 장고 설치하기] ==> 기존글과 동일

[ 설정변경하기]

[ 데이터베이스 설정하기]

[ 어플리케이션 만들기]

[ 블로그글 모델 만들기]

[ 장고 관리자 등록]

[ 배포하기]

 -PythonAnywhere

[참고자료 ]  

https://tutorial.djangogirls.org/ko/deploy/

https://tutorial.djangogirls.org/ko/installation/

============================================================================


[ 장고 설치하기] ==> 기존글과 동일


아나콘다 콘솔화면에서 ==> pip install django

=> 장고설치는 비주얼한 화면등은 없음, 장고설치후 아래 명령어 실행시 프로젝트 틀을 만들어 주는 역할을 함

django-admin startproject <프로젝트이름> => mysite

=> "<c:\anaconda36>c:\>django-admin startproject mysite " 로 입력하면, c 드라이브에 mysite 폴더가 생성되면서, 

관련 파일들이 같이 생성이되어 디렉토리에 저장이 된다.

이 화일을들을 아래와 같이 수정해 나가면 됨

python manage.py runserver

웹브로우저 실행: http://127.0.0.1:8000/


[ 설정변경하기]

mysite/settings.py

    TIME_ZONE = 'Asia/Seoul'

mysite/settings.py

STATIC_URL = '/static/'

STATIC_ROOT = os.path.join(BASE_DIR, 'static')

mysite/settings.py

ALLOWED_HOSTS = ['127.0.0.1', '.pythonanywhere.com'] 


[ 데이터베이스 설정하기]

mysite/settings.py

DATABASES = {

    'default': {

        'ENGINE': 'django.db.backends.sqlite3',

        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),

    }

}


데이터베이스 생성 => 프롬프트에서 python manage.py migrate 실행


[ 어플리케이션 만들기]

python manage.py startapp blog =>blog라는 이름의 어플리케이션 만들기

mysite/settings.py 화일 수정

INSTALLED_APPS = [

    'django.contrib.admin',

    'django.contrib.auth',

    'django.contrib.contenttypes',

    'django.contrib.sessions',

    'django.contrib.messages',

    'django.contrib.staticfiles',

    'blog',


[ 블로그글 모델 만들기]

blog/models.py

from django.db import models

from django.utils import timezone

class Post(models.Model):

    author = models.ForeignKey('auth.User')

    title = models.CharField(max_length=200)

    text = models.TextField()

    created_date = models.DateTimeField(

            default=timezone.now)

    published_date = models.DateTimeField(

            blank=True, null=True)


    def publish(self):

        self.published_date = timezone.now()

        self.save()


    def __str__(self):

        return self.title

python manage.py makemigrations blog ==> 데이터베이스 반영전 마이그레이션 화일 준비함

python manage.py migrate blog ==> 글 모델이 데이터베이스에 저장됨


[ 장고 관리자 등록]

'settings.py'중 LANGUAGE_CODE = 'en-us'를 LANGUAGE_CODE = 'ko' ==> 관리자 화면 한국어로 변경

blog/admin.py ==> 화일수정

from django.contrib import admin

from .models import Post

admin.site.register(Post)==> 모델 등록하기

python manage.py createsuperuser : 아래는 예시임
command-line
(myvenv) ~/djangogirls$ python manage.py createsuperuser
Username: admin
Email address: admin@admin.com
Password:
Password (again):
Superuser created successfully.


사이트 접속하기
    - http://127.0.0.1:8000/admin/  으로 접속하고
    - 아이디로 로그인 하면 아래 위에서 만들었던 블로그 어플리케이션이 실행이 된다.


   상기내용들은 복습성격이 강함

[ 배포하기]==> PythonAnywhere

1. GIT, GITHUB를 설치하고, 저장소를 만들어서 저장한다

  - GIT 을 설치한다

  - 소스코드를 COMMIT하여, GIT에 버전관리 등록한다

  - GITHUB 설치한다

  - GITHUB에 저장소를 만들어, GIT의 화일을 싱크해 온다 ( GIT에서 PUSH 하기) 

  - 세부방법은 이전글 http://daviduino.co.kr/85 을 참고한다


2. PythonAnywhere에 블로그 설정하기

  - 회원가입한다(무료)

3. GitHub에서 PythonAnywhere로 코드 가져오기

  - 배시(Bash)" 콘솔을 실행해서, 콘솔화면으로 들어간다

  - PythonAnywhere command-line

   . $ git clone https://github.com/<your-github-username/my-first-blog.git

   . $ tree my-first-blog 명령어를 입력  ==> 화일이 제대로 불러와졌는지 확인가능

PythonAnywhere command-line

$ tree my-first-blog

my-first-blog/

├── blog

│   ├── __init__.py

│   ├── admin.py

│   ├── migrations

│   │   ├── 0001_initial.py

│   │   └── __init__.py

│   ├── models.py

│   ├── tests.pyㅊㅇ  ㅡ

│   └── views.py

├── manage.py

└── mysite

    ├── __init__.py

    ├── settings.py

    ├── urls.py

    └── wsgi.py


4. PythonAnywhere에서 가상환경(virtualenv) 생성하기

  - PythonAnywhere command-line

$ cd my-first-blog

$ virtualenv --python=python3.6 myvenv

Running virtualenv with interpreter /usr/bin/python3.6

[...]

Installing setuptools, pip...done.

$ source myvenv/bin/activate  ==> 위에서 설치한 가상환경을 활성화 함

(myvenv) $  pip install django~=1.11.0 => 가상환경 안에서 장고를 설치함

Collecting django

[...]

Successfully installed django-1.11.3

5분정도 시간이 소요될수 있음


5. PythonAnywhere에서 데이터베이스 생성하기

 - ythonAnywhere command-line

   . (mvenv) $ python manage.py migrate

Operations to perform:

[...]

     Applying sessions.0001_initial... OK

   . (mvenv) $ python manage.py createsuperuser


6. web app으로 블로그 배포하기

  - PythonAnywhere 대시보드 ==>Web==>Add a new web app

  - 도메인 이름을 확정한 후, 대화창에 수동설정(manual configuration)

  - Python 3.6을 선택하고 다음(Next)을 클릭하면 마법사가 종료됩니다.

    . Note "Django"가 아니라  "수동설정(Manual configuration)"을 선택해야함

    . 기본 PythonAnywhere Django 설정을 위해서 이방법이 유리함.



7. 가상환경(virtualenv) 설정하기

 - "가상환경(Virtualenv)" 섹션에서 가상환경 경로를 입력(Enter the path to a virtualenv) ==> /home/<your-username>/my-first-blog/myvenv/ 

    라고 입력

8. WSGI 파일 설정하기

 - "WSGI 설정 파일(WSGI configuration file)" ==> /var/www/<your-username>_pythonanywhere_com_wsgi.py부분) 클릭

 - 모든내용을 삭제==>아래 내용으로 기록

import os

import sys

path = '/home/david2012/my-first-blog/mysite2/'  # PythonAnywhere 계정으로 바꾸세요.(하기 청색부분 참고바람)

if path not in sys.path:

    sys.path.append(path)

os.environ['DJANGO_SETTINGS_MODULE'] = 'mysite2.settings'

from django.core.wsgi import get_wsgi_application

from django.contrib.staticfiles.handlers import StaticFilesHandler

application = StaticFilesHandler(get_wsgi_application())


** 특히 " path = '/home/david2012/my-first-blog/mysite2/'  # PythonAnywhere 계정으로 바꾸세요. " 요 부분을 설정할때 주의를 요한다

   본 글에서는 아래와 같이 설정했을때(/home/david20120720/mtsite, 정상작동을 했음 . 예전에 상기와 같이 했을때 정상작동을 했음

   즉 프로그램의 디렉토리 저장상태에 따라 결정하면 됨.

   아래 그림은

david20120720 계정의 mysite 프로젝트를 path 로 지정하고

path안의 폴더 mysite안의 setting (mysite.settings) 화일에 접근하는것을 나타내고 있음.




  - 저장=> WEB 클릭

  - 모두 끝았음. RELOAD 및 홈페이지 실행시 웹이 실행됨


9. 구현된 모습 : 정상작동중

http://david20120720.pythonanywhere.com/ 로 접속하면 아래 화면이 나오고


    david20120720.pythonanywhere.com/admin/으로 접속하고, 로긴 하면  아래와 같이 어플리케이션이 실행됨





    



[참고자료 ]


https://programmers.co.kr/learn/courses/6

http://daviduino.co.kr/85



 daviduino.co.kr

techtogetworld.com

 david201207.blog.me

cafe.naver.com/3dpservicedavid


[web sever 구축_파이선_DJANGO #2 ] 버전/백업관리를 위한 GIT 활용


글의순서는 아래와 같습니다.

==========================================

1. GIT에 등록하기(commit)

2. GITHUB 원격저장소 만들기

3. GITHUB 원격저장소에  git 에 commit 되어있는 file을 원격 저장하기]

4. 참고자료

https://opentutorials.org/course/1492

https://programmers.co.kr/learn/courses/6

http://hackersstudy.tistory.com/41

==========================================


[GIT에 등록하기]


SOURCETREE  설치하기

 - 그래픽환경의 GIT 프로그램

GIT 저장소 만들기

 - FILE ==>CLONE,NEW... ==> Create new respository

 - type : git

 - destination path : 노트북에 프로젝트 폴더를 만든다

GIT 저장소에 화일 저장하기

 - 웹프로그램 화일을 프로젝트 폴더에 넣는다.

 - unstaged 상태인 화일을 선택해서, staged 상태로 만들고, commit을 한다

 - commit과 동시에 버전관리가 시작된다

편집기(atom)에 프로젝트 폴더 등록하기

 - add project folder

 - atom에서 작업하는 내용은 git 프로젝트에 실시간으로 동기화 된다.


[GITHUB 원격저장소 만들기]

GITHUB 계정을 만든다

NEW rapositiry

 - rapagitory name 지정

 - public

 - create rapository

NEW rapositiry 접근 주소 확인 (http용)...............A



[GITHUB 원격저장소에  git 에 commit 되어있는 file을 원격 저장하기]


git 프로그램(sourcetree)으로 이동해서 

rapository => add remote ==> url/path 지정(글의 A 주소 지정) =>Remote name 지정 ( 최초시 origial 선택) ==>ok

sourcetree 좌측 메뉴에 remote 부분에 origin 등록된건 확인

llocal 저장소의 화일을 원격저장소로 옮기기 위해

 - push 버튼 실행

github 화면으로 화서 화면 refresh를 하면, 화일이 저장되어있는것을 확인


 








[ 참고자료 ]


https://opentutorials.org/course/1492

https://programmers.co.kr/learn/courses/6


 daviduino.co.kr

techtogetworld.com

 david201207.blog.me

cafe.naver.com/3dpservicedavid

 

web sever 구축_파이선 장고로 웹 사이트 구축하기


===================================================================

[ 장고 설치하기]

 - 파이선 웹프로그램 : 파이선의 패키중에 웹 프로그래밍 전문 패키지임

[hello  출력하기]

[ elections data db에 저장하기]

[ elections data db에 data 추가하기]

[ DATA 보여주기]

[아나콘다 prompt에서 manage.py 실행하기]

[탬플릿으로 html 불러오기]

[탬플릿에 정보채우기]

[여론조사 모델]

[ url 다루기]

[ 여론조사 화면 구현]

[ 여론조사 결과를 DB에 저장 ]

[ 참고자료 ]

 ==>https://programmers.co.kr/learn/courses/6

==================================================================

mysite.zip


[ 장고 설치하기]

아나콘다 콘솔화면에서 ==> pip install django django-admin startproject <프로젝트이름> => 프로젝트 이름은 mysite 로 한다 python manage.py runserver ==> 서버가 실행이 됨 웹브로우저 실행하여 접속함: http://127.0.0.1:8000/


서버가 실행중이면, 콘솔로 다른 작업이 불가능함, 콘솔에서 ctrl+c 로 종료를 해주어야 다른 작업이 가능해짐


[hello 출력하기] python manage.py startapp <앱이름> ==> 앱 이름은 elections 로 한다 views.py 작성: 자동으로 생성된 views.py를 아래 내용으로 수정한다     from django.shortcuts import render     from django.http import HttpResponse     def index(request):r     return HttpResponse("Hello world") mysite 내의 urls.py 수정 ==> 웹 실행시 실행될 app 지정     urlpatterns = [     url(r'^', include('elections.urls')),         ==> http://127.0.0.1:8000 으로 접속했을때, elections.urls을 실행하라고 지정해주는 것이다

==> include실행을 위해서는 mysite내의 urls.py 내에서 from django.conf.urls import include를 선언해주어야 함     url(r'^admin/', admin.site.urls),

  ==> admin으로 접속했을때, admin 화면으로 접속하게된다 ] elections 폴더에 urls.py 화일 작성 ==> http://127.0.0.1:8000/ 접속시 view.py내의 index 함수를 실행하라고 지정을 해줌

=> 그러면 최종적으로는 view.index 화일이 실행이 됨     from django.conf.urls import url     from . import views     urlpatterns = [      url(r'^$', views.index), ]

[ elections data db에 저장하기] models.py 수정==>     class Candidate(models.Model): ==> 후보자 data 정의      name=models.CharField(max_length=10)      introduction=models.TextField()      area=models.CharField(max_length=15)      party_number=models.IntegerField(default=1) db에 models.py의 data를 저장한다=> 시스템 off시 화일이 없어지지 않고, 저장케 하는 방법은 db에 저장하는것이다. mysite 내의 settings.py     INSTALLED_APPS = [     'django.contrib.admin',     'django.contrib.auth',     'django.contrib.contenttypes',     'django.contrib.sessions',      'django.contrib.messages',      'django.contrib.staticfiles',      'elections' ==> 추가해 준다     ] mysite 에서 python manage.py makemigrations 실행

==>model data를 db에 어떤형식으로 쓸것인가에 대해 정의함

==> db 항목의 변화가 있때마다 실행을 해줘야 반영이 됨 python manage.py migrate ==> 실제로 db를 만들어줌, ==> db 항목의 변화가 있때마다 실행을 해줘야 반영이 됨

[ elections data db에 data 추가하기] >python manage.py createsuperuser name : david     비밀번호 2번 입력 : a1a1a1aa1 >python manage.py reunserver 웹브러우저에서 127.0.0.1:8000/admin admin.py 화일 수정     from django.contrib import admin     # Register your models here.     from .models import Candidate ==> models.py화일에서 Candidate를 불러다 쓰겠다는 내용임     admin.site.register(Candidate)     Candidate가 추가되었음을 볼수있음.

    

data 추가를 하면 candidate object로 구분이 되지 않음.     이를 해결하기 위해, model.py화일에 name으로 식별하겠다고 정의해줌         def __str__(self): ==> def 뒤에 한칸을 띄고, 줄마춤을 맞추어야 한다.         return self.name




[ DATA 보여주기] view.py 수정하기 def index(request): candidates = Candidate.objects.all() str = "" for candidate in candidates: str += "<p>{}기호 {}번 ({})<BR>".format(candidate.name, candidate.party_number, candidate.area) str += candidate.introduction + "</P>" return HttpResponse(str)



[아나콘다 prompt에서 manage.py 실행하기]

>python manage.py shell 이후 나타는 [1]. [2] 라인에 코딩을 하면, 실행이 됨 [1]from elections.models import Candidate [2] new_candidate = Candidate(name = "홍명순") [3]new_candidate.save()

[4]Candidate.objects.all()
[5] no1 = Candidate.objects.filter(party_number = 1)
[6] no1[0].party_number
[7] no1[0].name

[탬플릿으로 html 불러오기]

템플릿 추가하기 templates 폴더 생성 (\mysite\elections\templates) elecetions 폴더 생성(\mysite\elections\templates\elections) index.html 파일 생성 (\mysite\elections\templates\elections\index.html)

index.html 화일 수정하기


<!DOCTYPE html> <html lang="en"> <head> <title>선거 후보</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <table class="table table-striped"> <thead> <tr> <td><B>이름</B></td> <td><B>소개</B></td> <td><B>출마지역</B></td> <td><B>기호</B></td> </tr> </thead> <tbody> <tr> <td>가후보</td> <td>후보입니다.</td> <td>우리나라</td> <td>기호1번</td> </tr> <tr> <td>나후보</td> <td>후보입니다.</td> <td>우리나라</td> <td>기호2번</td> </tr> <tbody> </table> </body>


VIEW.PY 화일 수정

from django.shortcuts import render from django.http import HttpResponse from .models import Candidate def index(request): candidates = Candidate.objects.all() return render(request,'elections/index.html')

   



[탬플릿에 정보채우기]


cadidate의 내용을 cpntext 매개로해서, html에 전달함

views.py 화일 수정


 def index(request):

     candidates = Candidate.objects.all()

     context={'candidates':candidates} ==>사전만들기

     return render(request,'elections/index.html',context)



index.html 화일 수정 ==> 데이터를 동적으로 받아 출력함

<body>

<div class="container">

    <table class="table table-striped">

        <thead>

        <tr>

            <td><B>이름</B></td>

            <td><B>소개</B></td>

            <td><B>출마지역</B></td>

            <td><B>기호</B></td>

        </tr>

        </thead>

        <tbody>

        {% for candidate in candidates %}

        <tr>

            <td>{{candidate.name}}</td>

            <td>{{candidate.introduction}}</td>

            <td>{{candidate.area}}</td>

            <td>기호{{candidate.party_number}}번</td>

        </tr>

        {% endfor %}

        <tbody>

    </table>

</body>

  



[여론조사 모델]

model.py 화일 수정


class Poll(models.Model):

    start_date = models.DateTimeField()

    end_date = models.DateTimeField()

    area = models.CharField(max_length = 15)


class Choice(models.Model):

    poll = models.ForeignKey(Poll) #Poll 모델의 id를 이용

    candidate = models.ForeignKey(Candidate)

    votes = models.IntegerField(default = 0)


admin.py 화일 수정


from django.contrib import admin


# Register your models here.

from .models import Candidate,Poll ==> poll 추가


admin.site.register(Candidate)

admin.site.register(Poll) ==> poll 추가등록


아나콘다 프롬프트에서 실행 ==> 모델 생성후 추가로 실행해야하는 코드임
python manage.py makemigrations
python manage.py migrate
python manage.py runserver
 



[ url 다루기]


index 화일 수정

<td> {{candidate.area}} </td>

==> <td> <a href = "areas/{{candidate.area}}/">{{candidate.area}}</a> </td>


urs.py 화일 수정

  url(r'^areas/(?P<area>.+)/$', views.areas)


views.py 화일 수정

def areas(request, area) :

return HttpResponse(area)

[ 여론조사 화면 구현]


area.html 화일 작성

<!DOCTYPE html>

<html lang="en">

<head>

  <title>지역구</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

<h1>지역구</h1>

<br>

    <table class="table table-striped">

        <thead>

        <tr>

            <td><B>이름</B></td>

            <td><B>소개</B></td>

            <td><B>기호</B></td>

            <td><B>지지하기</B></td>

        </tr>

        </thead>

        <tbody>

        <tr>

            <td> 후보1</td>

            <td> 후보소개 </td>

            <td> 기호1번 </td>

            <td>

                <form action = "#" method="post">

                    <button name="choice" value="#">선택</button>

                </form>

            </td>

        </tr>

        <tr>

            <td> 후보2</td>

            <td> 후보소개 </td>

            <td> 기호2번 </td>

            <td>

                <form action = "#" method="post">

                    <button name="choice" value="#">선택</button>

                </form>

            </td>

        </tr>

        </tbody>

    </table>

</div>

</body>



view.py file 수정

def areas(request, area):

    candidates = Candidate.objects.filter(area = area) #Candidate의 area와 매개변수 area가 같은 객체만 불러오기

    context = {'candidates': candidates,

    'area' : area}

    return render(request, 'elections/area.html', context)


area.html 화일 수정

<!DOCTYPE html>

<html lang="en">

<head>

  <title>{{area}}</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

<h1>{{area}}</h1>

<br>

    <table class="table table-striped">

        <thead>

        <tr>

            <td><B>이름</B></td>

            <td><B>소개</B></td>

            <td><B>기호</B></td>

            <td><B>지지하기</B></td>

        </tr>

        </thead>

        <tbody>

        {% for candidate in candidates %}

        <tr>

            <td> {{candidate.name}}</td>

            <td> {{candidate.introduction}}</td>

            <td> 기호{{candidate.party_number}}번 </td>

            <td>

                <form action = "#" method = "post">

                    <button name="choice" value="#">선택</button>

                </form>

            </td>

        </tr>

        {% endfor %}

        </tbody>

    </table>

</div>

</body>



area에 현재 진행 중인 poll이 있는지 확인하기


views.py 화일 수정

from .models import Candidate, Poll, Choice import datetime


area.html 화일 수정

<!DOCTYPE html>

<html lang="en">

<head>

  <title>{{area}}</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

<h1>{{area}}</h1>

<br>

{% if poll %}

    <table class="table table-striped">

        <thead>

        <tr>

            <td><B>이름</B></td>

            <td><B>소개</B></td>

            <td><B>기호</B></td>

            <td><B>지지하기</B></td>

        </tr>

        </thead>

        <tbody>

        {% for candidate in candidates %}

        <tr>

            <td> {{candidate.name}}</td>

            <td> {{candidate.introduction}}</td>

            <td> 기호{{candidate.party_number}}번 </td>

            <td>

                <form action = "#" method = "post">

                    <button name="choice" value="#">선택</button>

                </form>

            </td>

        </tr>

        {% endfor %}

        <tbody>

    </table>

{% else %}

여론조사가 없습니다

{% endif %}

</div>

</body>



[ 여론조사 결과를 DB에 저장 ]


웹사이트에서 결과를 전달


<!-- C:\Code\mysite\templates\elections\area.html -->

<!DOCTYPE html>

<html lang="en">

<head>

  <title>{{area}}</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

<h1>지역구</h1>

<br>

{% if poll %}

    <table class="table table-striped">

        <thead>

        <tr>

            <td><B>이름</B></td>

            <td><B>소개</B></td>

            <td><B>기호</B></td>

            <td><B>지지하기</B></td>

        </tr>

        </thead>

        <tbody>

        {% for candidate in candidates %}

        <tr>

            <td> {{candidate.name}}</td>

            <td> {{candidate.introduction}}</td>

            <td> 기호{{candidate.party_number}}번 </td>

            <td>

                <form action = "/polls/{{poll.id}}/" method = "post">

                {% csrf_token %}

                    <button name="choice" value="{{candidate.id}}">선택</button>

                </form>

            </td>

        </tr>

        {% endfor %}

        <tbody>

    </table>

{% else %}

여론조사가 없습니다

{% endif %}

</div>

</body>



action에서 지정한 url을 등록

코드추가

urlpatterns = [

    # 기존 url 유지

    url(r'^polls/(?P<poll_id>\d+)/$', views.polls)

]


view.polls 구현 => views.py 수정

코드추가


def polls(request, poll_id):

    poll = Poll.objects.get(pk = poll_id)

    selection = request.POST['choice']

    try: 

        choice = Choice.objects.get(poll_id = poll.id, candidate_id = selection)

        choice.votes += 1

        choice.save()

    except:

        choice = Choice(poll_id = poll.id, candidate_id = selection, votes = 1)

        choice.save()

    return HttpResponse("finish")






[ 참고자료 ]


https://programmers.co.kr/learn/courses/6

 daviduino.co.kr

techtogetworld.com

 david201207.blog.me

cafe.naver.com/3dpservicedavid


Webserver 를 Github에 구축코자 합니다(https://david20120720.github.io/)


Github는 개발자들이 협업, 자료공유,커뮤티케이션을 할수있는 플랫폼으로 많이 알려져 있습니다(https://github.com)

오늘은 많은 기능들중에서 ,github page기능에 대해 글을 쓰고자 합니다.

page 기능은 github에 웹서버를 구축하는 개념입니다.

개발자들간에 협업을 할때, 유용한 기능인것 같습니다(장점: 도메인, 호스팅 서비스 무료,+다양한 기능들)


글의 순서는 아래와 같습니다.


=======================================================

1. github.com 계정만들기 ==> 세부사항은 생략하겠습니다.사이트에 접속하셔서 계정만드시면 됩니다.

2. page(웹페이지)용 저장소 만들기

3. page 저장소에 웹프로그램(html, java script ,구글지도 api등) 저장하기

4. 인터넷에 공개하기

5. 웹에 나타난 전체모습

   https://david20120720.github.io/


=======================================================



[ page(웹페이지)용 저장소 만들기 ]


1. github  계정을 만들면, 아래 화면을 볼수있습니다. 

  메뉴중 repositorie 항목이, 저장소 입니다.  그림상으로 4개가 등록이 되어 있음을 알수있습니다.

2. 새로운 저장소를 만듦니다. 홈페이지 프로그램을 저장할 저장소 입니다. 아래 화면의 "New"를 클릭합니다.


3.새로운 저장소의 이름은 "david20120720.github.io " 입니다. 향후 이 저장소 이름이 웹의 주소가 됩니다.

  public 선택 하시고, initiallize this ~ readme.md "를 선택하고 , 최하단 create~ 를 클릭하면, 저장소가 생성이 됩니다.  



[ page 저장소에 웹프로그램(html, java script ,구글지도 api등) 저장하기 ]

1. 아래 저장소에 웹프로그램을 저장합니다.

2. 주의사항

  . 아래 화일중 readme.md 화일은 저장소 생성시 자동으로 만들어진 화일입니다. 화일 내용에 " # david20120720.github.io "라고 입력이 되어있는데 , 이 내용을 삭제를 하시기 바랍니다. 삭제를 않하면 웹주소창에 주소치고 들어가면 불필요한 내용이 들어가서, 혼동이 생길수 있습니다.

3. 웹프로그램 소스화일을 유첨합니다. 간단한 소개화일입니다.

www git.zip


 

[인터넷에 공개하기]

 - Setting 메뉴선택

 - 하단의 github pages에서  source =>mater branch 선택후 save 한다





[웹에 나타난 전체모습]

1. 주소창에 " 개인아이디.github.io"로 들어가면 됩니다.

 - 메인창(index)

 

메뉴_나의 소개

 - 구글 진도 api를 넣어, 지도를 표현해 봤습니다.



메뉴_관심 분야




메뉴_최근 동향







 daviduino.co.kr

techtogetworld.com

 david201207.blog.me

cafe.naver.com/3dpservicedavid


IOT(사물인터넷) 웹 서비스 구축하기(WordPress 적용)  #4


오늘은 미세먼지 측정지역을 구글지도로 확인하는 방법에 대한 글입니다.

글의 순서는


----------------------------------------------------------------------------

1. 메뉴구성

2. 미세먼지 측정대상 위치를 선택함

3. 선택된 지역에 대한 위도와 경도에 대한 정보를 데이터 베이스에서 찾아서 배열로 저장한다

4. 배열에 저장되 위치(경도/위도)에 해당하는 지도용 PHP를 호출 실행한다.

5. 홈페이지상 구현된 모습 

6. Next step

  - 구글지도의 위도 경도를 수치가 아닌 변수로 지정하고, 사용자가 선택하는 지역의 위도/경도를  데이터 베이스로 부터

    불러와서, 바로 구글 지도로 변수를 통해 넘겨서 그리는 방법 구현

    . 현재는 변수를 지정시에 정상 작동이 안되고 있음, 추후 개선 필요사항임.

  - 미세먼지 데이터 조회와, 측정위치 선택하는 과정을 구조화/보완예정임(사용자 편의성을 위함임)

----------------------------------------------------------------------------


[ 메뉴구성 ]


1.주 메뉴 "미세먼지 모니터링 웹 서비스"의 하위 메뉴(측정지역)로 만든다



[ 미세먼지 측정대상 위치를 선택함 ]

  

1. 상기 그림에서 텍스트 박스에  미세먼지 측정지역을 기록하고, 선택하기 버튼을 누르면, 해당 지도가 나타남

2. 측정위치를 선택하는 코딩

  - 저장위치 : 워드프레스 페이지

-------------------------------------------------------------------------------------------------

<!-- 미세먼지 측정위치를 선택하면, 해당 위치가 구글 지도에 나타냄 -->

<div class="container">

<div class="row">

<nav class="col-md-2">

<p>

 [ 미세먼지 측정 위치 ]

      <li>구로역</li>

      <li>인천역</li>

      <li>오류역</li>

      <li>신도림</li>

       <form action="" method="post">

        <input type="text" name="location1" id="loca1">

        <input type="submit" value="선택하기">

      </form>

</p>

</nav>

<nav class="col-md-9">


<!-- 선택한 측정위치를 변수($LOCATION)에 저장 -->


[xyz-ips snippet="finemap"] ==> Sort code ( 입력받은 위치에 대한 지도를 나타내는 코드의 short code )

---------------------------------------------------------------------------------------------------

3. 입력받은 위치에 대한 지도를 나타낸다

 - 저장위치 : php 플러그인으로 작성하고, shot 코드를  페이지에 등록해서 실행을 시킨다.

 - 코드

--------------------------------------------------------------------------------------------------

// post type으로 위치를 입력 받는다 //

$location1=$_POST['location1'];



[선택된 지역에 대한 위도와 경도에 대한 정보를 데이터 베이스에서 찾아서 배열로 저장한다]


// 위치정보 데이터 베이스에 접속한다 

$link = mysqli_connect("localhost","개인아이디",비밀번호,"데이터베이스 명","포트");

// $sql="select id ,location ,latitude ,longitude from 'finemap' " ; 


// 위치정보중  선택된 지역에 대한 위도와 경도를 배열에 저장한다 

$sql="select * from `finemap` "  ;

$result=mysqli_query($link,$sql);

$rows=array();

$flag=true;

$table=array();

$table['cols']=array(

array('id'=>'id' , 'type'=>'number'),

array('location'=>'location','type'=>'string'),

array('latitude'=>'latitude','type'=>'number'),

array('longitude'=>'longitude','type'=>'number')

);

$rows=array();


while($r=mysqli_fetch_assoc($result)){

$location = $r['location'];

if ($location==$location1) {

$lat = $r['latitude'];

$long = $r['longitude'];

}

}


[ 배열에 저장되 위치(경도/위도)에 해당하는 지도용 PHP를 호출 실행한다.]


// 선택된 지역의 경도/위도값이 같은 배열의 요소값을 찾아내고,  요소값에 해당하는 지역의 지도를 실행시킨다


if ($lat==37.4766 && $long==126.617) {

require('./dust/logetincheon.php'); 

}elseif ($lat==37.4947 && $long==126.845) {

require('./dust/logetoryu.php'); 

} elseif($lat==37.5032 && $long==126.882 ) {

require('./dust/logetqua.php'); 

} elseif($lat==37.5088 && $long==126.891) {

  require('./dust/logetsindo.php'); 

}

-----------------------------------------------------------------------------------------------------

4. 선택된 지역의 구글 지도를 실행함

 - 하기 코드는 구로역에 대한 코드임, 다른지역의 코드는 "경도와 위도"만 틀리고, 나머지부분은 동일함, 본지에서는 생략함(중복)

 - 저장위치 : www/dust/ 폴더에 php형태로 저장하고, 상기의 php  require 함수를 이용해서 호출/실행 시킵니다.

-----------------------------------------------------------------------------------------------------

<div id="map" style="width:1024px;height:600px"></div>

<script>

function myMap() {

var azit = new Array();

var azitColor = new Array();

var zoomNumber = 16;

azit[0] = new google.maps.LatLng(37.5032,126.882);

azitColor[0] = "red";

var mapCanvas = document.getElementById("map");

var mapOptions = {center: azit[0], zoom: zoomNumber};

var map = new google.maps.Map(mapCanvas,mapOptions);


for(var i in azit) {

var myCity = new google.maps.Circle({

center: azit[i],

radius: 100,

strokeColor: "BLACK",

strokeOpacity: 0.8,

strokeWeight: 2,

fillColor: azitColor[i],

fillOpacity: 0.4

});

myCity.setMap(map);

}

};

</script>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAOYundwm4l2yUb7A3nfKoj5V99wr3n9O0&callback=myMap"></script>


----------------------------------------------------------------------------------------------------------


[ 홈페이지상 구현된 모습 ]


1. 위치정보를  data base 에 저장해 놓는다.



2. 선택된 지역의 구글지도