008-zCBZNuwSBks. building blog and deploying it via github and azure
<![CDATA[
@
blog/comment_form.html
<form action="" method="post">
{% csrf_token %}
<table>
{{ form.as_table }}
</table>
<input type="submit" />
</form>
@
forms.py
from django import forms
from .models import Comment
class CommentForm(forms.ModelForm):
class Meta:
model = Comment
# About all fields
fields = ['message']
@
base.html
<!doctype html>
<html>
<head>
<meta charset="utf8" />
<title>
Hello
</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h1 class="mt-5">A Bootstrap 4 Starter Template</h1>
<p class="lead">Complete with pre-defined file paths and responsive navigation!</p>
<ul class="list-unstyled">
<li>Bootstrap 4.0.0</li>
<li>jQuery 3.3.0</li>
</ul>
</div>
</div>
</div>
{% block content %}
{% endblock %}
</body>
</html>
@
post_detail.html
{% block content %}
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="panel panel-info">
<div class="panel-heading">
{{ post.title }}
</div>
<div class="panel-body">
<p>
<img src="{{ post.photo.url }}" style="max-width: 100px;" />
</p>
{{ post.content }}
</div>
<div class="panel-footer">
<a href="{% url "blog:post_list" %}" class="btn btn-default">back to list</a>
<a href="{% url "blog:commnet_new" post.pk %}" class="btn btn-primary">write comment</a>
</div>
</div>
{{ post.comment_set.all }}
<div id="comment_list">
{% for comment in post.comment_set.all %}
<div class="media">
<div class="media-body">
{{ comment.message }}
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
{% endblock %}
@
mymelting/blog/templates/admin.py
from django.contrib import admin
from .models import Post, Comment
admin.site.register(Post)
admin.site.register(Comment)
@
blog/templates/models.py
from django.db import models
from django.core.urlresolvers import reverse
class Post(models.Model):
title = models.CharField(max_length=100)
content = models.TextField()
photo = models.ImageField()
# I need this "title selection" (in comment writing) to show
def __str__(self):
return self.title
class Comment(models.Model):
# Since one post has multiple comment, Post is foreign key
post = models.ForeignKey(Post)
message = models.TextField()
def get_absolute_url(self):
return reverse('blog:post_detail', args=[self.post_id])
@
blog/templates/blog/post_list.html
# I inherit template from base.html
{% extends "blog/base.html" %}
{% block content %}
<div class="container">
<div class="row">
<div class="col-sm-12">
{% for post in post_list %}
<div class="media">
<div class="media-left">
<img src="{{ post.photo.url }}" style="max_width:100px;" />
</div>
<div class="media-body">
<h4>
<a href="{% url "blog:post_detail" post.pk %}">{{ post.title }}</a>
</h4>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
{% endblock %}
@
blog/views.py
from django.views.generic import ListView, DetailView, CreateView
from django.shortcuts import get_object_or_404, render
from .models import Post, Comment
from .forms import CommentForm
# def post_list(request):
# return render(request, 'blog/post_list.html')
# url mapped by urls..py, associtated here, corresponding method is invoked
post_list = ListView.as_view(model=Post)
post_detail = DetailView.as_view(model=Post)
class CommentCreateView(CreateView):
model = Comment
form_class = CommentForm
def form_valid(self, form):
comment = form.save(commit=False)
comment.post = get_object_or_404(Post, pk=self.kwargs['post_pk'])
comment.save()
return super(CommentCreateView, self).form_valid(form)
comment_new = CommentCreateView.as_view()
@
blog/urls.py
from django.conf.urls import include, url
from . import views
urlpatterns = [
# If user connects to first page, we will invoke views.post_list()
# name='post_list' is url name
url(r'^$', views.post_list, name='post_list'),
# If this pattern(localhost:8000/1/ or localhost:8000/3947/) is matched in url,
# views.post_detail() is invoked
url(r'^(?P<pk>\d+)/$', views.post_detail, name='post_detail'),
# This is for comment
# When I write comment for post1, I can go to localhost:8000/1/comments/new
url(r'^(?P<post_pk>\d+)/comment/new/$', views.comment/new, name='comment_new'),
]
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
@
mymelting/urls.py
from django.conf.urls import include, url
from django.conf import settings
from django.contrib import admin
from django.core.urls.static import static
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'' , include('blog.urls', namespace='blog')),
]
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
@
common.py
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'blog',
]
@
Azure is windows server
Django runs on iis server
@
You can pass "template" parameter when you run startproject,
which means I create project with this template
This template includes all files and all settings you need
django-admin startproject --extension config --template=https://github.com/askdjango/django-azurewebapp-template/archive/master.zip mymelting
You should run server
python manage.py runserver
@
You need this file to debug in visual studio
ptvs_virtualenv_proxy.py
This file is for deployment of 2.7 version
web.2.7.config
This file is for deployment of 3.4 version
web.3.4.config
This file is for configuration of debug
web.debug.config
This file is for deploy command
deploy.cmd
@
Now, we deploy app to azure
azure cli was made by node.js
First, you need to login
azure login
You create webapp in azure
azure site create mymelting --location "East Asia"
Since this created azure webapp supports node.js, php, python, .net, etc,
you can form pages with those languages
@
You try to run local server
python manage.py runserver
You can see too simple web page
@
We will deploy this app to azure via github
First, you need to create new repository
You perform "git init" on this folder
git init
You perform "git add ." on this current folder
git add .
You perform "git commit" on this current folder
git commit
You designate gihub remote repository
got remote add origin git@github.com:username/mymelting.git
You upload code to github
git push -u origin master
@
go to portal.azure.com
go to All resources
You can see added mymelting project
@
go to deployment source
select choose source which provides various ways of deploying
select github
select choose project and mymelting
Click Sync to deploy
@
We will build blog service
python manage.py startapp blog
@
We will create template so, we need folder for template
mkdir -p blog/templates/blog/
@
Since we created model, we should do migration
python manage.py makemigrations blog
python manage.py migrate
python manage.py migrate blog
@
You should create admin account
python manage.py createsuperuser
@
Let's deploy
upload to github and sync in azure
@
In mymelting project in azure, click Github Project $mymelting:RTOCcZd.....
you can go to mymelting.scm.azurewebsites.net (Kudu)
@
Click cmd in debug console tab
You're brought to web cmd window
We do migration here
cd site
dir
cd wwwroot
env\Scripts\python manage.py migrate --settings=mymelting.settings.azure_webapp
@
Create superuser
env\Scripts\python manage.py shell --settings=mymelting.settings.azure_webapp
from django.contrib.auth import get_user_model
User = get_user_model()
User.objects.create_superuser('youid', '', 'yourpw')
@
Now, go to mymelting.azurewebsites.net/admin
@
We can use inheritance of template
We create base.html
@
We will use django forms to implement comment
]]>