Djangoでサンプルページ作成

環境 Link to heading

  • ホスト
    • OS: Windows 10
    • 仮想化ソフト: Vagrant (VirtualBoxを使用)
  • ゲスト
    • OS: CentOS 7.1
    • IPアドレス（プライベートネットワーク）: 192.168.33.10
  • 使用するソフトウェアのバージョン（本稿でインストール方法を記載しています）
    • Python: 3.5.1
    • Django: 1.10.4

Python3インストール Link to heading

こちらのサイトを参考にさせていただきました。

$ sudo yum install -y gcc zlib-devel bzip2 bzip2-devel readline readline-devel sqlite sqlite-devel openssl openssl-devel git
 
$ git clone https://github.com/yyuu/pyenv.git ~/.pyenv
 
$ vi ~/.bash_profile
# 以下を追加
export PYENV_ROOT="$HOME/.pyenv"
export PATH="$PYENV_ROOT/bin:$PATH"
eval "$(pyenv init -)"
 
$ source .bash_profile
 
$ pyenv install 3.5.1
 
$ python --version
Python 2.7.5
 
$ pyenv versions
* system (set by /home/vagrant/.pyenv/version)
3.5.1
 
$ pyenv global 3.5.1
 
$ pyenv rehash
 
$ python --version
Python 3.5.1
 
$ pyenv versions
system
* 3.5.1 (set by /home/vagrant/.pyenv/version)

Djangoをインストール Link to heading 

$ sudo yum install -y python-pip
 
$ pip install django

初期ページ表示 Link to heading 

$ django-admin startproject mysite
 
$ cd mysite/
 
$ vi mysite/settings.py
ALLOWED_HOSTS = ['192.168.33.10',] # 変更
 
$ python manage.py runserver 0.0.0.0:8000

ブラウザから「192.168.33.10:8000」にアクセスすると下の画像のようなページが表示されます。

initial-page

サンプルページ作成（HTML, CSS, Javascript使用） Link to heading 

$ vi mysite/urls.py
from django.conf.urls import url
from django.contrib import admin
from . import views # 追記
 
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^$', views.index, name='index'), # 追記
]
 
$ vi mysite/views.py
# 以下を作成
from django.shortcuts import render
from django.http import HttpResponse
 
def index(request):
return render(request, 'index.html')
 
$ vi mysite/settings.py
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates'),], # 変更
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]
 
# 以下を追記
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
]
 
$ mkdir templates
 
$ mkdir static
 
$ mkdir static/css
 
$ mkdir static/js
 
$ vi templates/index.html
# 以下を作成
{% load static %}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Django test page</title>
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<script type="text/javascript" src="{% static 'js/sample.js' %}"></script>
</head>
<body>
<h1 id="title">Django test page</h1>
<button type="button" id="button">Click here</button>
</body>
</html>
 
$ vi static/css/style.css
# 以下を作成
@charset "UTF-8";
 
body {
text-align: center;
}
 
$ vi static/js/sample.js
# 以下を作成
window.addEventListener('load',
    function (event) {
        document.getElementById('button').addEventListener('click',
            function() {
                alert('Hello');
            }
        , false);
    }
, false);
 
$ python manage.py runserver 0.0.0.0:8000

再度、ブラウザから「192.168.33.10:8000」にアクセスすると下の画像のようなページが表示されます。

django-test-page