Apr. 25

Most of codes are based on:
https://realpython.com/get-started-with-django-1/

  1. # to check package XXX available
  2. yum provides XXX
  4. # previous commands
  5. history
  7. # python install
  8. pip install
  10. # Linux install
  11. yum install
  13. # sqlite3 version check
  14. sqlite3 --version
  2. - Made django into older version to make 'runserver' to lower it's requirement of sqlite3 version.
  3. ```bash
  4. pip uninstall django
  5. pip install Django==2.1.*


Apr. 26

  • According to the tutorial, created view and a basic “hello world” request listening
  • manipulated settings.py and url.py

Apr. 27

  • Template/foorstrap setup

Apr. 28

  • To create a database:
    • Used Object Relational Mapper (ORM) to modify database table models.py ```python from django.db import models

class Project(models.Model): title = models.CharField(max_length=100) description = models.TextField() technology = models.CharField(max_length=20) image = models.FilePathField(path=”/img”)

  2.    - Created a migration based on the model, and applied that migrate
  3. ```python
  4. # Generated by Django 2.1.15 on 2020-04-29 03:39
  6. from django.db import migrations, models
  9. class Migration(migrations.Migration):
  11.     initial = True
  13.     dependencies = [
  14.     ]
  16.     operations = [
  17.         migrations.CreateModel(
  18.             name='Project',
  19.             fields=[
  20.                 ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
  21.                 ('title', models.CharField(max_length=100)),
  22.                 ('description', models.TextField()),
  23.                 ('technology', models.CharField(max_length=20)),
  24.                 ('image', models.FilePathField(path='/img')),
  25.             ],
  26.         ),
  27.     ]
  • db.sqlite3 is created and ready to go


  • To access Django shell: 
    1. python manage.py shell
    Initialized 3 projects and created some related views.

Apr. 29 - May. 4

Change the currently project into a blog site featured web app.

Basic setup:

This part is based on video: https://www.youtube.com/watch?v=UmljXZIypDc

  • Get into the correct folder: ```bash [root@localhost Python]# django-admin startproject django_project

now we have

[root@localhost Python]# tree . └── djangoproject ├── djangoproject │ ├── __init.py │ ├── settings.py │ ├── urls.py │ └── wsgi.py └── manage.py

  2. <a name="9ytnd"></a>
  3. #### To run the server: 
  4. This part is based on video: [https://www.youtube.com/watch?v=UmljXZIypDc](https://www.youtube.com/watch?v=UmljXZIypDc)
  5. ```bash
  6. [root@localhost Python]# cd django_project/
  7. [root@localhost django_project]# python manage.py runserver
  8. Performing system checks...
  10. System check identified no issues (0 silenced).
  12. You have 15 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
  13. Run 'python manage.py migrate' to apply them.
  15. May 02, 2020 - 23:43:05
  16. Django version 2.1.15, using settings 'django_project.settings'
  17. Starting development server at http://127.0.0.1:8000/
  18. Quit the server with CONTROL-C.

Use localhost:8000/blog/ in the browser and we’ll see a page that shows
“The install worked successfully! Congratulations!”
…so that the server works. The terminal keeps tracing the server until you press “ctrl+c” or use some other methods to shutdown the server.

Add applications and routes:

This part is based on video: https://www.youtube.com/watch?v=a48xeeo5Vnk

  • The tutorial asked me to add an application “blog”, so that we start a blog here: ```bash [root@localhost django_project]# python manage.py startapp blog

now we have

[root@localhost djangoproject]# tree . ├── blog │ ├── admin.py │ ├── apps.py │ ├── init.py │ ├── migrations │ │ └── init.py │ ├── models.py │ ├── tests.py │ └── views.py ├── db.sqlite3 ├── djangoproject │ ├── 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 └── manage.py

4 directories, 17 files

  2. - build a webpage to handle /blog request
  3. - /blog/views.py:
  4. ```python
  5. from django.shortcuts import render
  6. from django.http import HttpResponse
  8. # handle the traffic from homepage to blog
  9. def home(request):
  10.     return HttpResponse('<h1>Blog Home</h1>')
  • define a url pattern to that webpage
  • /blog/urls.py: ```python from django.urls import path from . import views # import from current directory

urlpatterns = [ path(‘’, views.home, name=’blog-home’), ]

  2. - Then redirect blog/ to that pattern
  3. - /django_project/urls.py
  4. ```python
  5. from django.contrib import admin
  6. from django.urls import path
  7. from django.conf.urls import include # new
  9. urlpatterns = [
  10.     path('admin/', admin.site.urls),
  11.     path('blog/', include('blog.urls')) # to blog/urls.py
  12. ]

To test:

Muitple routes:

Here we have a url localhost:8000/blog/about/

  • /blog/urls.py: ```python from django.urls import path from . import views # import from current directory

urlpatterns = [ path(‘’, views.home, name=’blog-home’), path(‘about/‘, views.about, name=’blog-about’), ]

  2. - /blog/views.py
  3. ```python
  4. from django.shortcuts import render
  5. from django.http import HttpResponse
  7. def home(request):
  8.     return HttpResponse('<h1>Blog Home</h1>')
  10. # new
  11. def about(request):
  12.     return HttpResponse('<h1>Blog About</h1>')

To test, input localhost:8000/blog/about/ in a browser.
Now we can see a header “Blog About” instead of “Blog Home”, it means that the pattern is directed to def about in /django_project/urls.py instead of def home.

  • To make blog as the homepage of the app, change /django_project/urls.py into: ```python from django.contrib import admin from django.urls import path from django.conf.urls import include # new

urlpatterns = [ path(‘admin/‘, admin.site.urls),

  1. # path('blog/', include('blog.urls'))
  2. path('', include('blog.urls')) # change here

]

  1. Now you only need [localhost:8000](http://localhost:8000/blog/about/) to browser the homepage.
  3. <a name="MrGzJ"></a>
  4. #### Templates: 
  6. - add an app in django_project/settings.py:
  7. ```python
  8. //...
  9. INSTALLED_APPS = [
  10.     'blog.apps.BlogConfig', # new
  11.     'django.contrib.admin',
  12.     'django.contrib.auth',
  13.     'django.contrib.contenttypes',
  14.     'django.contrib.sessions',
  15.     'django.contrib.messages',
  16.     'django.contrib.staticfiles',
  17. ]
  18. //...

  • create 2 directories to save templates:

    1. [root@localhost django_project]# mkdir blog/templates
    2. [root@localhost django_project]# mkdir blog/templates/blog

  • make a basic HTML page for home called home.html in blog/templates/blog/

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.   <title></title>
    5. </head>
    6. <body>
    7.   <h1>Blog Home!</h1>
    8. </body>
    9. </html>

  • change blog/views.py to redirect the request to the HTML page we just setup: ```python from django.shortcuts import render from django.http import HttpResponse

handle the traffic from homepage to blog

def home(request): return render(request, ‘blog/home.html’)

  1. #return HttpResponse('<h1>Blog Home</h1>')

def about(request): return HttpResponse(‘

Blog About

‘)

  1. To test: 
  3. - [localhost:8000/](http://127.0.0.1:8000/blog/) in a browser to see "Blog Home!", same as blog/templates/blog/home.html
  5. We can use similar way to set a template and apply it for "about": 
  7. - make a basic HTML page for about called about.html in blog/templates/blog/
  8. ```html
  9. <!DOCTYPE html>
  10. <html>
  11. <head>
  12.     <title></title>
  13. </head>
  14. <body>
  15.     <h1>Blog About!</h1>
  16. </body>
  17. </html>
  • change blog/views.py to redirect the request to the HTML page we just setup: ```python from django.shortcuts import render from django.http import HttpResponse

handle the traffic from homepage to blog

def home(request): return render(request, ‘blog/home.html’)

  1. #return HttpResponse('<h1>Blog Home</h1>')

def about(request): return render(request, ‘blog/about.html’)

  1. # return HttpResponse('<h1>Blog About</h1>')
  1. To test: 
  3. - [localhost:8000/blog/](http://127.0.0.1:8000/blog/) in a browser to see "Blog About!"
  6. - To handle more stuffs, here we have a 'post' dictionary in blog/views.py:
  7. ```python
  8. //...
  9. posts = [
  10.     {
  11.         'author': 'CoreyMS',
  12.         'title': 'Blog Post 1',
  13.         'content': 'First post content',
  14.         'date_posted': 'August 27, 2018'
  15.     },
  16.     {
  17.         'author': 'Jane Doe',
  18.         'title': 'Blog Post 2',
  19.         'content': 'Second post content',
  20.         'date_posted': 'August 28, 2018'
  21.     }
  22. ]
  23. //...

  • we want to post them, so we adjust blog/templates/blog/home.html:

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.   <title></title>
    5. </head>
    6. <body>
    7.   {% for post in posts %}
    8.       <h1>{{ post.title }}</h1>
    9.       <p>By{{ post.author }} on {{ post.date_posted }}</p>
    10.       <p>{{ post.content }}</p>
    11.   {% endfor %}
    12. </body>
    13. </html>

    and now we have a HTML file with a for loop, so that it can recursively print posts in sequence.
    To test:

  • localhost:8000/ in a browser

we see:

Capture.JPG

  • Here we do another test, pass dictionary and apply if else in blog/templates/blog/about.html:

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.   {% if title %}
    5.       <title>Django Blog - {{ title }}</title>
    6.   {% else %}
    7.       <title>Django Blog</title>
    8.   {% endif %}
    9. </head>
    10. <body>
    11.   <h1>Blog About!</h1>
    12. </body>
    13. </html>

  • in blog/views.py:

    1. def about(request):
    2.   return render(request, 'blog/about.html', {'title': 'About'})
    3.   # return render(request, 'blog/about.html')

    To test:

  • localhost:8000/about/ in a browser

If there is {‘title’: ‘About’} in render, the title(not header) of that page is “Django Blog - About”
If not, the title is “Django Blog”

We also apply that if else express of title to blog/templates/blog/home.html:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     {% if title %}
  5.         <title>Django Blog - {{ title }}</title>
  6.     {% else %}
  7.         <title>Django Blog</title>
  8.     {% endif %}
  9. </head>
  10. <body>
  11.     {% for post in posts %}
  12.         <h1>{{ post.title }}</h1>
  13.         <p>By{{ post.author }} on {{ post.date_posted }}</p>
  14.         <p>{{ post.content }}</p>
  15.     {% endfor %}
  16. </body>
  17. </html>

and now we have an appropriate title for both pages.

Inherit templates:

We can add another HTML file to make sure more codes are reused.

  • Create a base.html in blog/templates/blog/

  • Add common parts and some available starter templates:

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.   <!-- Required meta tags -->
    5.   <meta charset="utf-8">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    8.   <!-- Bootstrap CSS -->
    9.   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    11.   {% if title %}
    12.       <title>Django Blog - {{ title }}</title>
    13.   {% else %}
    14.       <title>Django Blog</title>
    15.   {% endif %}
    16. </head>
    17. <body>
    18.     <div class = "container">
    19.       {% block content %}{% endblock %}
    20.   </div>
    22.   <!-- Optional JavaScript -->
    23.   <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    24.   <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    25.   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    26.   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    27. </body>
    28. </html>

  • use this “extends content” logic on home.html and about.html:

    1. {% extends "blog/base.html" %}
    2. {% block content %}
    3.   {% for post in posts %}
    4.       <h1>{{ post.title }}</h1>
    5.       <p>By{{ post.author }} on {{ post.date_posted }}</p>
    6.       <p>{{ post.content }}</p>
    7.   {% endfor %}
    8. {% endblock content %}
    1. {% extends "blog/base.html" %}
    2. {% block content %}
    3.   <h1>Blog About!</h1>
    4. {% endblock content %}

    They will show the same content as those versions which did not apply base.html
    Use view-source:(path) to check it.

May. 5

Add navigation & main template:

https://github.com/CoreyMSchafer/code_snippets/blob/master/Django_Blog/snippets
Copy navigation.html and main.html in this link to base.html: 

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <!-- Required meta tags -->
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  8.     <!-- Bootstrap CSS -->
  9.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  11.     {% if title %}
  12.         <title>Django Blog - {{ title }}</title>
  13.     {% else %}
  14.         <title>Django Blog</title>
  15.     {% endif %}
  16. </head>
  17. <body>
  18.     <!-- navigation.html -->
  19.     <header class="site-header">
  20.         <nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top">
  21.             <div class="container">
  22.             <a class="navbar-brand mr-4" href="/">Django Blog</a>
  23.             <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
  24.             <span class="navbar-toggler-icon"></span>
  25.             </button>
  26.             <div class="collapse navbar-collapse" id="navbarToggle">
  27.                 <div class="navbar-nav mr-auto">
  28.                 <a class="nav-item nav-link" href="/">Home</a>
  29.                 <a class="nav-item nav-link" href="/about">About</a>
  30.                 </div>
  31.                 <!-- Navbar Right Side -->
  32.                 <div class="navbar-nav">
  33.                 <a class="nav-item nav-link" href="#">Login</a>
  34.                 <a class="nav-item nav-link" href="#">Register</a>
  35.                 </div>
  36.             </div>
  37.             </div>
  38.         </nav>
  39.     </header>
  41.     <!-- main.html -->
  42.     <main role="main" class="container">
  43.         <div class="row">
  44.             <div class="col-md-8">
  45.             {% block content %}{% endblock %}
  46.             </div>
  47.             <div class="col-md-4">
  48.             <div class="content-section">
  49.                 <h3>Our Sidebar</h3>
  50.                 <p class='text-muted'>You can put any information here you'd like.
  51.                 <ul class="list-group">
  52.                     <li class="list-group-item list-group-item-light">Latest Posts</li>
  53.                     <li class="list-group-item list-group-item-light">Announcements</li>
  54.                     <li class="list-group-item list-group-item-light">Calendars</li>
  55.                     <li class="list-group-item list-group-item-light">etc</li>
  56.                 </ul>
  57.                 </p>
  58.             </div>
  59.             </div>
  60.         </div>
  61.     </main>
  63.     <!-- Optional JavaScript -->
  64.     <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  65.     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  66.     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  67.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  68. </body>
  69. </html>

Now we have a navigation bar for each page.

May. 6

Load static:

  • Create a folder under blog/ called static/
  • Then, create another folder called blog/ under blog/static/
  • Copy https://github.com/CoreyMSchafer/code_snippets/blob/master/Django_Blog/snippets/main.css to blog/static/blog/
  • Now the project looks like: ```bash [root@localhost djangoproject]# tree . ├── blog │ ├── admin.py │ ├── apps.py │ ├── init.py │ ├── migrations │ │ ├── init.py │ │ └── pycache │ │ └── init.cpython-36.pyc │ ├── models.py │ ├── pycache │ │ ├── admin.cpython-36.pyc │ │ ├── apps.cpython-36.pyc │ │ ├── init.cpython-36.pyc │ │ ├── models.cpython-36.pyc │ │ ├── urls.cpython-36.pyc │ │ └── views.cpython-36.pyc │ ├── static │ │ └── blog │ │ └── main.css │ ├── templates │ │ └── blog │ │ ├── about.html │ │ ├── base.html │ │ └── home.html │ ├── tests.py │ ├── urls.py │ └── views.py ├── db.sqlite3 ├── djangoproject │ ├── 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 └── manage.py

10 directories, 29 files

  2. - Let templates/blog/base.html apply that css file:
  3. ```html
  4. <!-- new -->
  5. {% load static %}
  6. <!DOCTYPE html>
  7. <html>
  8. <head>
  9.     <meta charset="utf-8">
  10.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  12.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  14.     <!-- load blog/main.css -->
  15.     <link rel="stylesheet" type="text/css" href="{% static 'blog/main.css' %}">
  17.     {% if title %}
  18.         <title>Django Blog - {{ title }}</title>
  19.     {% else %}
  20.         <title>Django Blog</title>
  21.     {% endif %}
  22. </head>
  23. <body>
  24.     <header class="site-header">
  25.         <nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top">
  26.             <div class="container">
  27.             <a class="navbar-brand mr-4" href="/">Django Blog</a>
  28.             <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
  29.             <span class="navbar-toggler-icon"></span>
  30.             </button>
  31.             <div class="collapse navbar-collapse" id="navbarToggle">
  32.                 <div class="navbar-nav mr-auto">
  33.                 <a class="nav-item nav-link" href="/">Home</a>
  34.                 <a class="nav-item nav-link" href="/about">About</a>
  35.                 </div>
  36.                 <!-- Navbar Right Side -->
  37.                 <div class="navbar-nav">
  38.                 <a class="nav-item nav-link" href="#">Login</a>
  39.                 <a class="nav-item nav-link" href="#">Register</a>
  40.                 </div>
  41.             </div>
  42.             </div>
  43.         </nav>
  44.     </header>
  46.     <main role="main" class="container">
  47.         <div class="row">
  48.             <div class="col-md-8">
  49.             {% block content %}{% endblock %}
  50.             </div>
  51.             <div class="col-md-4">
  52.             <div class="content-section">
  53.                 <h3>Our Sidebar</h3>
  54.                 <p class='text-muted'>You can put any information here you'd like.
  55.                 <ul class="list-group">
  56.                     <li class="list-group-item list-group-item-light">Latest Posts</li>
  57.                     <li class="list-group-item list-group-item-light">Announcements</li>
  58.                     <li class="list-group-item list-group-item-light">Calendars</li>
  59.                     <li class="list-group-item list-group-item-light">etc</li>
  60.                 </ul>
  61.                 </p>
  62.             </div>
  63.             </div>
  64.         </div>
  65.     </main>
  67.     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  68.     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  69.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  70. </body>
  71. </html>

Now the page looks like:
Capture.JPG

Article format:

  • Copy codes in https://github.com/CoreyMSchafer/code_snippets/blob/master/Django_Blog/snippets/article.html
  • Delete the for loop in templates/blog/home.html and add these lines to show articles(posts) better:
    1. {% extends "blog/base.html" %}
    2. {% block content %}
    3.   {% for post in posts %}
    4.               <!-- new -->
    5.       <article class="media content-section">
    6.           <div class="media-body">
    7.               <div class="article-metadata">
    8.               <a class="mr-2" href="#">{{ post.author }}</a>
    9.               <small class="text-muted">{{ post.date_posted }}</small>
    10.               </div>
    11.               <h2><a class="article-title" href="#">{{ post.title }}</a></h2>
    12.               <p class="article-content">{{ post.content }}</p>
    13.           </div>
    14.       </article>  
    15.   {% endfor %}
    16. {% endblock content %}
    Now the page looks like:
    Capture.JPG

    Adjust site-header:

    1. <header class="site-header">
    2.       <nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top">
    3.           <div class="container">
    4.           <!-- href="/" -->
    5.           <a class="navbar-brand mr-4" href="{% url 'blog-home' %}">Django Blog</a>
    6.           <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
    7.           <span class="navbar-toggler-icon"></span>
    8.           </button>
    9.           <div class="collapse navbar-collapse" id="navbarToggle">
    10.               <div class="navbar-nav mr-auto">
    11.               <!-- href="/" -->
    12.               <a class="nav-item nav-link" href="{% url 'blog-home' %}">Home</a>
    13.               <!-- href="/about" -->
    14.               <a class="nav-item nav-link" href="{% url 'blog-about' %}">About</a>
    15.               </div>
    16.               <!-- Navbar Right Side -->
    17.               <div class="navbar-nav">
    18.               <a class="nav-item nav-link" href="#">Login</a>
    19.               <a class="nav-item nav-link" href="#">Register</a>
    20.               </div>
    21.           </div>
    22.           </div>
    23.       </nav>
    24.   </header>
    so that those button on the header can refer to names in blog/urls.py instead of a route: ```python

    blog/urls.py

    from django.urls import path from . import views # import from current directory

urlpatterns = [ path(‘’, views.home, name=’blog-home’), path(‘about/‘, views.about, name=’blog-about’), ]

  2. <a name="wS9Il"></a>
  3. #### Admin page:
  4. This step we gonna make that localhost:8000/admin/ useful by adding an admin. 
  5. ```bash
  6. [root@localhost django_project]# python manage.py migrate
  7. Operations to perform:
  8.   Apply all migrations: admin, auth, contenttypes, sessions
  9. Running migrations:
  10.   Applying contenttypes.0001_initial... OK
  11.   Applying auth.0001_initial... OK
  12.   Applying admin.0001_initial... OK
  13.   Applying admin.0002_logentry_remove_auto_add... OK
  14.   Applying admin.0003_logentry_add_action_flag_choices... OK
  15.   Applying contenttypes.0002_remove_content_type_name... OK
  16.   Applying auth.0002_alter_permission_name_max_length... OK
  17.   Applying auth.0003_alter_user_email_max_length... OK
  18.   Applying auth.0004_alter_user_username_opts... OK
  19.   Applying auth.0005_alter_user_last_login_null... OK
  20.   Applying auth.0006_require_contenttypes_0002... OK
  21.   Applying auth.0007_alter_validators_add_error_messages... OK
  22.   Applying auth.0008_alter_user_username_max_length... OK
  23.   Applying auth.0009_alter_user_last_name_max_length... OK
  24.   Applying sessions.0001_initial... OK
  25. [root@localhost django_project]# python manage.py createsuperuser
  26. Username (leave blank to use 'root'): 
  27. Email address: 
  28. Password: 
  29. Password (again): 
  30. Superuser created successfully.

To test, login on localhost:8000/admin/ with the admin account you just created, and you will see the default Django site admin page:
Capture.JPG

  • Enter “Users” page, we click that “new user” button:

Capture.JPG

  • Setup a test user for later tests:

Capture.JPG

  • We click “save and continue editing” for further setup of this non-admin account, such as email address and superuser status, etc.
  • There are too many detailed selections, so we don’t show this step.
  • Now we have 2 accounts for this website.

May. 7

Database & migrations:

  • add a “Post” class in blog/models.py ```go from django.db import models from django.utils import timezone from django.contrib.auth.models import User

class Post(models.Model): title = models.CharField(max_length=100) content = models.TextField() date_posted = models.DateField(default=timezone.now) author = models.ForeignKey(User, on_delete=models.CASCADE)

  1. def __str__(self):
  2.     return self.title
  2. - in the terminal, use makemigrations to create a migration: 
  3. ```bash
  4. [root@localhost django_project]# python manage.py makemigrations
  5. Migrations for 'blog':
  6.   blog/migrations/0001_initial.py
  • that initiated blog/migrations/0001_initial.py looks like: ```go from django.conf import settings from django.db import migrations, models import django.db.models.deletion import django.utils.timezone

class Migration(migrations.Migration):

  1. initial = True
  3. dependencies = [
  4.     migrations.swappable_dependency(settings.AUTH_USER_MODEL),
  5. ]
  7. operations = [
  8.     migrations.CreateModel(
  9.         name='Post',
  10.         fields=[
  11.             ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
  12.             ('title', models.CharField(max_length=100)),
  13.             ('content', models.TextField()),
  14.             ('date_posted', models.DateField(default=django.utils.timezone.now)),
  15.             ('author', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to=settings.AUTH_USER_MODEL)),
  16.         ],
  17.     ),
  18. ]
  2. - Now create a "blog_post" SQL table and migrate:
  3. ```bash
  4. [root@localhost django_project]# python manage.py sqlmigrate blog 0001
  5. BEGIN;
  6. --
  7. -- Create model Post
  8. --
  9. CREATE TABLE "blog_post" ("id" integer NOT NULL PRIMARY KEY AUTOINCREMENT, "title" varchar(100) NOT NULL, "content" text NOT NULL, "date_posted" date NOT NULL, "author_id" integer NOT NULL REFERENCES "auth_user" ("id") DEFERRABLE INITIALLY DEFERRED);
  10. CREATE INDEX "blog_post_author_id_dd7a8485" ON "blog_post" ("author_id");
  11. COMMIT;
  12. [root@localhost django_project]# python manage.py migrate
  13. Operations to perform:
  14.   Apply all migrations: admin, auth, blog, contenttypes, sessions
  15. Running migrations:
  16.   Applying blog.0001_initial... OK
  • add an object into Post model in python shell: ```bash [root@localhost django_project]# python manage.py shell Python 3.6.5 (default, Sep 10 2018, 09:39:42) Type ‘copyright’, ‘credits’ or ‘license’ for more information IPython 6.5.0 — An enhanced Interactive Python. Type ‘?’ for help.

In [1]: from blog.models import Post

In [2]: from django.contrib.auth.models import User

In [3]: User.objects.all() Out[3]: , ]>

In [4]: User.objects.first() Out[4]:

In [5]: User.objects.filter(username = “root”) Out[5]: ]>

In [6]: User.objects.filter(username = “root”).first() Out[6]:

In [7]: user = User.objects.filter(username = “root”).first()

In [8]: user Out[8]:

In [9]: user.id Out[9]: 1

In [10]: user.pk # primary key Out[10]: 1

In [12]: user = User.objects.get(id=1)

In [13]: user Out[13]:

In [14]: Post.objects Out[14]:

In [15]: Post.objects.all() Out[15]:

In [16]: post_1 = Post(title=’Blog’, content=’First Post Content!’, author=user)

In [17]: post_1.save()

In [18]: Post.objects.all() Out[18]: ]>

  2. - Here shows several methods to see variables in a model: 
  3. ```bash
  4. [root@localhost django_project]# python manage.py shell
  5. Python 3.6.5 (default, Sep 10 2018, 09:39:42) 
  6. Type 'copyright', 'credits' or 'license' for more information
  7. IPython 6.5.0 -- An enhanced Interactive Python. Type '?' for help.
  9. In [1]: from blog.models import Post
  11. In [2]: from django.contrib.auth.models import User
  13. In [3]: Post.objects.all()
  14. Out[3]: <QuerySet [<Post: Blog>]>
  16. In [4]: User.objects.filter(username = "root").first()
  17. Out[4]: <User: root>
  19. In [5]: user = User.objects.filter(username = "root").first()
  21. In [6]: user
  22. Out[6]: <User: root>
  24. In [7]: post_2 = Post(title='Blog 2', content='Second Post Content!', author_id=
  25.    ...: user.id)
  27. In [8]: post_2.save()
  29. In [9]: Post.objects.all()
  30. Out[9]: <QuerySet [<Post: Blog>, <Post: Blog 2>]>
  32. In [10]: post = Post.objects.first()
  34. In [11]: post.content
  35. Out[11]: 'First Post Content!'
  37. In [12]: post.date_posted
  38. Out[12]: datetime.date(2020, 5, 7)
  40. In [13]: post.author
  41. Out[13]: <User: root>
  43. In [14]: post.author.email
  44. Out[14]: 'root@gmail.com'
  46. In [15]: user.post_set
  47. Out[15]: <django.db.models.fields.related_descriptors.create_reverse_many_to_one_manager.<locals>.RelatedManager at 0x7ff1f05a3c88>
  49. In [16]: user.post_set.all()
  50. Out[16]: <QuerySet [<Post: Blog>, <Post: Blog 2>]>
  52. In [17]: user.post_set.create(title='Blog 3', content = 'Third Post Content!')
  53. Out[17]: <Post: Blog 3>
  55. In [18]: Post.objects.all()
  56. Out[18]: <QuerySet [<Post: Blog>, <Post: Blog 2>, <Post: Blog 3>]>
  58. In [19]: Post.objects.all().first()
  59. Out[19]: <Post: Blog>
  • Now we have a table and several objects, so we can just change the way to post in blog/views.py: ```go from django.shortcuts import render from .models import Post #new

def home(request): context = { ‘posts’: Post.objects.all() #import from blog_post }

  1. return render(request, 'blog/home.html', context)

def about(request): return render(request, ‘blog/about.html’, {‘title’: ‘About’})

  1. Then we see posts are replaced into stuff in the database:<br />![Capture.JPG](https://cdn.nlark.com/yuque/0/2020/jpeg/1243266/1588908245812-c5f35c61-588f-4f76-b21a-e82fd2d77a66.jpeg#align=left&display=inline&height=790&margin=%5Bobject%20Object%5D&name=Capture.JPG&originHeight=790&originWidth=1908&size=69595&status=done&style=none&width=1908)
  2. <a name="Hzwu4"></a>
  3. #### Update posts:
  5. - in blog/admin.py:
  6. ```go
  7. from django.contrib import admin
  8. from .models import Post
  10. admin.site.register(Post)
  • And now we have a link to view and update posts in localhost:8000/admin:

Capture.JPGCapture2.JPG

May. 8

User registeration:

This time we add a user register system.

  • First, start a new app called users, and now we have a users/ directory: ```bash [root@localhost djangoproject]# python manage.py startapp users [root@localhost djangoproject]# tree . ├── blog │ ├── admin.py │ ├── apps.py │ ├── init.py │ ├── migrations │ │ ├── 0001initial.py │ │ ├── init.py │ │ └── pycache │ │ ├── 0001initial.cpython-36.pyc │ │ └── init.cpython-36.pyc │ ├── models.py │ ├── pycache │ │ ├── admin.cpython-36.pyc │ │ ├── apps.cpython-36.pyc │ │ ├── init.cpython-36.pyc │ │ ├── models.cpython-36.pyc │ │ ├── urls.cpython-36.pyc │ │ └── views.cpython-36.pyc │ ├── static │ │ └── blog │ │ └── main.css │ ├── templates │ │ └── blog │ │ ├── about.html │ │ ├── base.html │ │ └── home.html │ ├── tests.py │ ├── urls.py │ └── views.py ├── db.sqlite3 ├── djangoproject │ ├── 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 ├── manage.py └── users ├── admin.py ├── apps.py ├── __init.py ├── migrations │ └── __init.py ├── models.py ├── tests.py └── views.py

12 directories, 38 files

  2. - change django_project/settings.py:
  3. ```go
  4. //...
  5. INSTALLED_APPS = [
  6.     'blog.apps.BlogConfig', 
  7.     'users.apps.UsersConfig', # new
  8.     'django.contrib.admin',
  9.     'django.contrib.auth',
  10.     'django.contrib.contenttypes',
  11.     'django.contrib.sessions',
  12.     'django.contrib.messages',
  13.     'django.contrib.staticfiles',
  14. ]
  15. //...
  • add a view in users/views.py: ```go from django.shortcuts import render from django.contrib.auth.forms import UserCreationForm

def register(request): form = UserCreationForm() return render(request, ‘users/register.html’, {‘form’: form})

  2. - make a templates/ folder in users/ and users. in users/templates/
  3. - create a register.html file in template/users/
  4. ```html
  5. {% extends "blog/base.html" %}
  6. {% block content %}
  7.     <div class="content-section">
  8.         <form method="POST">
  9.             {% csrf_token %}
  11.             <fieldset class="form-group">
  12.                 <legend class="border-bottom mb-4">Join Today</legend>
  13.                 {{ form }}
  14.             </fieldset>
  16.             <div class="form-group">
  17.                 <button class="btn btn-outline-info" type="submit">Sign Up</button>
  18.             </div>
  20.         </form>
  22.         <div class="border-top pt-3">
  23.             <small class="text-muted">
  24.                 Already Have An Account? <a class="ml-2" href="#">Sign In</a>
  25.             </small>
  26.         </div>
  28.     </div>
  29. {% endblock content %}

{% csrf_token %} is added for safety concern, and

includes an automatic method to create an account.

  • update django_project/urls.py: ```go from django.contrib import admin from django.urls import path from django.conf.urls import include from users import views as user_views # new

urlpatterns = [ path(‘admin/‘, admin.site.urls), path(‘register/‘, user_views.register, name = ‘register’), # new path(‘’, include(‘blog.urls’)) ]

  1. To test, run the server and use the path of register/ to get: <br />![Capture.JPG](https://cdn.nlark.com/yuque/0/2020/jpeg/1243266/1588969495436-7232fc64-b5b7-4c63-a576-317a7d60e0d5.jpeg#align=left&display=inline&height=653&margin=%5Bobject%20Object%5D&name=Capture.JPG&originHeight=653&originWidth=1492&size=77017&status=done&style=none&width=1492)<br />If we change {{ form }} in "form-group" class into {{ form.as_p }}, lines spilts a bit: <br />![Capture.JPG](https://cdn.nlark.com/yuque/0/2020/jpeg/1243266/1588969668075-5de8dbfb-3c4f-49e5-bb69-47585ac361c2.jpeg#align=left&display=inline&height=704&margin=%5Bobject%20Object%5D&name=Capture.JPG&originHeight=704&originWidth=1431&size=77753&status=done&style=none&width=1431)
  3. - add a if else logic for users/views.py to handle POST or non-POST requests:
  4. ```go
  5. from django.shortcuts import render
  6. from django.contrib.auth.forms import UserCreationForm
  7. from django.contrib import messages
  9. def register(request):
  10.     if request.method == 'POST':
  11.         form = UserCreationForm(request.POST)
  12.         if form.is_valid():
  13.             form.save()
  14.             username = form.cleaned_data.get('username')
  15.             messages.success(request, f'Account created for {username}!')
  16.             return redirect('blog-home')
  17.     else:
  18.         form = UserCreationForm()
  20.     return render(request, 'users/register.html', {'form': form})

  • and add several lines for blog/templates/blog/base.html to display messages:

    1. <!--...-->
    2. <div class="col-md-8">
    3.   {% if messages %}
    4.       {% for message in messages %}
    5.           <div class="alert alert-{{ message.tags }}">
    6.               {{ message }}
    7.           </div>
    8.       {% endfor %}
    9.   {% endif %}
    11.   {% block content %}{% endblock %}
    12. </div>
    13. <!--...-->

  • after that, the register page can tell you some common errors such as “A user with that username already exists.” or “The two password fields didn’t match.”, etc.

  • If username and password pair is valid, a new user is successfully created.

Change registration mode:

  • Becuase the default register only includes username and password, here we create forms.py under /users to transmit UserCreationForm into a new form: ```go from django import forms from django.contrib.auth.models import User from django.contrib.auth.forms import UserCreationForm

class UserRegisterForm(UserCreationForm): email = forms.EmailField()

  1. class Meta:
  2.     model = User
  3.     fields = ['username', 'email', 'password1', 'password2']
  2. - Then we discard UserCreationForm, apply UserRegisterForm in users/views.py: 
  3. ```go
  4. from django.shortcuts import render, redirect #new: redirect
  5. # from django.contrib.auth.forms import UserCreationForm
  6. from django.contrib import messages
  7. from .forms import UserRegisterForm
  9. def register(request):
  10.     if request.method == 'POST':
  11.         form = UserRegisterForm(request.POST)
  12.         if form.is_valid():
  13.             form.save()
  14.             username = form.cleaned_data.get('username')
  15.             messages.success(request, f'Account created for {username}!')
  16.             return redirect('blog-home')
  17.     else:
  18.         form = UserRegisterForm()
  20.     return render(request, 'users/register.html', {'form': form})

Now we try to register:
Capture.JPG
and now we have a register page that requires email address.

Import crispy form:

“Django-crispy-forms is an application that helps to manage Django forms. It allows adjusting forms’ properties (such as method, send button or CSS classes) on the backend without having to re-write them in the template.”

  • install crispy form:

    1. pip install django-crispy-forms

  • After the install is complete, change django_project/settings.py:

  • (remember that, most of complicated functions are done by those installed apps, and the first thing we should do is to include it in the list of “INSTALLED_APPS”) ```go //… INSTALLED_APPS = [ ‘blog.apps.BlogConfig’, ‘users.apps.UsersConfig’, ‘crispy_forms’, #new ‘django.contrib.admin’, ‘django.contrib.auth’, ‘django.contrib.contenttypes’, ‘django.contrib.sessions’, ‘django.contrib.messages’, ‘django.contrib.staticfiles’, ] //…

CRISPY_TEMPLATE_PACK = ‘bootstrap4’

  1. Then registers.html:
  2. ```html
  3. {% extends "blog/base.html" %}
  4. {% load crispy_forms_tags %} # new
  5. {% block content %}
  6.     <div class="content-section">
  7.         <form method="POST">
  8.             {% csrf_token %}
  10.             <fieldset class="form-group">
  11.                 <legend class="border-bottom mb-4">Join Today</legend>
  12.                {{ form|crispy }} # new
  13.             </fieldset>
  15.             <div class="form-group">
  16.                 <button class="btn btn-outline-info" type="submit">Sign Up</button>
  17.             </div>
  19.         </form>
  21.         <div class="border-top pt-3">
  22.             <small class="text-muted">
  23.                 Already Have An Account? <a class="ml-2" href="#">Sign In</a>
  24.             </small>
  25.         </div>
  27.     </div>
  28. {% endblock content %}

Now the register page looks better:
Capture.JPG

May. 11

  • This time we want to add a pair of pages to login and logout instead of using http://localhost:port/admin/.

    Login System:

  • add new paths in django_project/urls.py: ```python from django.contrib import admin from django.urls import path from django.conf.urls import include from users import views as user_views

from django.contrib.auth import views as auth_views # new

urlpatterns = [ path(‘admin/‘, admin.site.urls), path(‘register/‘, user_views.register, name = ‘register’), path(‘login/‘, auth_views.LoginView.as_view(template_name=’users/login.html’), name = ‘login’), # new path(‘logout/‘, auth_views.LogoutView.as_view(template_name=’users/logout.html’), name = ‘logout’), # new path(‘’, include(‘blog.urls’)) ]

  1. as you see here, login.html and logout.html are not yet in users/templates/users/, so we need to create these 2 templates.
  3. -  in users/templates/users/, create login.html:
  4. ```html
  5. {% extends "blog/base.html" %}
  6. {% load crispy_forms_tags %} # new
  7. {% block content %}
  8.     <div class="content-section">
  9.         <form method="POST">
  10.             {% csrf_token %}
  12.             <fieldset class="form-group">
  13.                 <legend class="border-bottom mb-4">Log In</legend>
  14.                {{ form|crispy }} # new
  15.             </fieldset>
  17.             <div class="form-group">
  18.                 <button class="btn btn-outline-info" type="submit">Login</button>
  19.             </div>
  21.         </form>
  23.         <div class="border-top pt-3">
  24.             <small class="text-muted">
  25.                 Need An Account? <a class="ml-2" href="{% url 'register' %}">Sign Up Now</a>
  26.             </small>
  27.         </div>
  29.     </div>
  30. {% endblock content %}
  • Recall: href=”{% url ‘[template name]’ %} is a simple method to create button as a url link.
  • Because now we actually have login.html, we setup the button from register to login

  • Also, we modify users/templates/users/register.html to set the button from login to register

  • Now we have a login page that can check incorrect username & password pair

image.png
but even if we input correct pairs, it cannot get into the right page because it’s not completed.
image.png

  • The error information said the request url is /accounts/profile/, but our format is quite different from that, so we add a line at the buttom of django_project/settings.py:

    1. # ...
    2. LOGIN_REDIRECT_URL = "blog-home" # to home.html in templates of blog/

    Then we can login successfully and be redirected into the blog homepage.

  • Change users/views.py to redirect users into the login page instead of homepage: ```python from django.shortcuts import render, redirect from django.contrib import messages from .forms import UserRegisterForm

def register(request): if request.method == ‘POST’: form = UserRegisterForm(request.POST) if form.is_valid(): form.save() username = form.cleaned_data.get(‘username’) messages.success(request, f’Your account has been created! You are now be able to login.’) # new return redirect(‘login’) else: form = UserRegisterForm()

  1. return render(request, 'users/register.html', {'form': form})
  2. <a name="Cg1sg"></a>
  3. #### Logout System:
  5. - create logout.html in users/templates/users to handle logout request:
  6. ```html
  7. {% extends "blog/base.html" %}
  8. {% block content %}
  9.     <h2>You have been logged out!</h2>
  10.     <div class="border-top pt-3">
  11.         <small class="text-muted">
  12.             <a href="{% url 'login' %}">Log In Again</a>
  13.         </small>
  14.     </div>
  15. {% endblock content %}
  • Now we have:

    image.png

    and logout page works.

Login/Logout/Register Navigation Buttons:

  • Now we need to make buttons in the navigation row works.

image.png

  • in blog/templates/blog/base.html:

    1. <!-- ... -->
    2. <div class="navbar-nav">
    3.   {% if user.is_authenticated %}
    4.       <a class="nav-item nav-link" href="{% url 'logout' %}">Logout</a>
    5.   {% else %}
    6.       <a class="nav-item nav-link" href="{% url 'login' %}">Login</a>
    7.       <a class="nav-item nav-link" href="{% url 'register' %}">Register</a>
    8.   {% endif %}
    9. </div>
    10. <!-- ... -->

  • change buttons into url links

  • if-else logic fixes:
    • if the user isn’t login, only allow login or register
    • if the user is online, only allow logout

For example, not logged in:
image.png
logged in:
image.png

Add a user profile page:

  • As usual, first we create a handler function in users/views.py:

    1. # ...
    2. def profile(request):
    3.  return render(request, 'users/profile.html')

  • Then create a corresponding template, users/templates/users/profile.html:

    1. {% extends "blog/base.html" %}
    2. {% load crispy_forms_tags %} 
    3. {% block content %}
    4.   <h1> {{user.username}} </h1>
    5. {% endblock content %}

    {{ (variable name) }} to show variables.

  • Finally, register the path in django_project/urls.py:

    1. # ...
    2. urlpatterns = [
    3.   path('admin/', admin.site.urls),
    4.   path('register/', user_views.register, name = 'register'), 
    5.   path('profile/', user_views.profile, name = 'profile'), # new
    6.   path('login/', auth_views.LoginView.as_view(template_name='users/login.html'), name = 'login'), 
    7.   path('logout/', auth_views.LogoutView.as_view(template_name='users/logout.html'), name = 'logout'), 
    8.   path('', include('blog.urls')) 
    9. ]

    and we have:
    image.png

  • To see profile easily, we add a button in the navigation row in blog/templates/blog/base.html:

    1. <!-- ... -->
    2. <div class="navbar-nav">
    3.   {% if user.is_authenticated %}
    4.   <a class="nav-item nav-link" href="{% url 'profile' %}">Profile</a>
    5.       <a class="nav-item nav-link" href="{% url 'logout' %}">Logout</a>
    6.   {% else %}
    7.       <a class="nav-item nav-link" href="{% url 'login' %}">Login</a>
    8.       <a class="nav-item nav-link" href="{% url 'register' %}">Register</a>
    9.   {% endif %}
    10. </div>
    11. <!-- ... -->

Only show profile when login:

  • Because there is no “user.username” variable if there is no user logged in, so we have to set a checking.
  • in users/views.py: ```python from django.contrib.auth.decorators import login_required # new

    …

@login_required # new def profile(request): return render(request, ‘users/profile.html’)

  2. - If the profile request is sent and you are not logged in, redirect to the login page.
  3. - in django_project/settings.py:
  4. ```python
  5. # ...
  7. LOGIN_REDIRECT_URL = "blog-home" # to home.html in templates of blog/
  8. LOGIN_URL = 'login' # new

and to test with http://localhost:8000/profile/ and stay offline we get(take a look at the new browser url):
image.png

May. 12

User profile and picture:

  • to make our users able to add other information and pictures for their profiles.
  • in order to make it works, we need to add field for these data.
  • modify users/models.py:

Extend user profile:

  • users/models.py: ```python from django.db import models from django.contrib.auth.models import User # new

class Profile(models.Model):

  1. # create a one-to-one relationship with the imported user model
  2. # if user is deleted, also delete the profile
  3. user = models.OneToOneField(User, on_delete=models.CASCADE) 
  5. # a field for images
  6. image = models.ImageField(default='default.jpg', upload_to='profile_pics')
  9. # whenever we printout profile. it will print username, either
  10. def __str__(self):
  11.     return f'{self.user.username} Profile'
  2. - in the terminal, install "Pillow" package for ImageField():
  3. ```bash
  4. [root@localhost django_project]# pip install Pillow
  • then create & run migrations:
    1. [root@localhost django_project]# python manage.py makemigrations
    2. Migrations for 'users':
    3. users/migrations/0001_initial.py
    4.   - Create model Profile
    5. [root@localhost django_project]# python manage.py migrate
    6. Operations to perform:
    7. Apply all migrations: admin, auth, blog, contenttypes, sessions, users
    8. Running migrations:
    9. Applying users.0001_initial... OK

Register profile:

  • users/admin.py: ```python from django.contrib import admin from .models import Profile # new

admin.site.register(Profile)

  1. to test, run server and use localhost:8000/admin/<br />![image.png](https://cdn.nlark.com/yuque/0/2020/png/1243266/1589334441531-52290ba9-6f30-4b40-b846-438a60c40316.png#align=left&display=inline&height=332&margin=%5Bobject%20Object%5D&name=image.png&originHeight=664&originWidth=1022&size=59111&status=done&style=none&width=511)<br />now we have a Profile section, get inside: <br />![image.png](https://cdn.nlark.com/yuque/0/2020/png/1243266/1589334514206-65179360-57dc-4615-9268-ba5c400d7b87.png#align=left&display=inline&height=178&margin=%5Bobject%20Object%5D&name=image.png&originHeight=356&originWidth=1893&size=32194&status=done&style=none&width=946.5)<br />use "ADD PROFILE" in the top-right corner to manually add profiles:<br />![image.png](https://cdn.nlark.com/yuque/0/2020/png/1243266/1589334678265-b60eba62-5b6d-4ead-886e-c81a383f6510.png#align=left&display=inline&height=213&margin=%5Bobject%20Object%5D&name=image.png&originHeight=426&originWidth=1901&size=41227&status=done&style=none&width=950.5)
  3. - try to access profile in python shell:
  4. ```bash
  5. [root@localhost django_project]# python manage.py shell
  6. Python 3.6.5 (default, Sep 10 2018, 09:39:42) 
  7. Type 'copyright', 'credits' or 'license' for more information
  8. IPython 6.5.0 -- An enhanced Interactive Python. Type '?' for help.
  10. In [1]: from django.contrib.auth.models import User
  12. In [2]: user = User.objects.filter(username='root').first()
  14. In [3]: user
  15. Out[3]: <User: root>
  17. In [4]: user.profile
  18. Out[4]: <Profile: root Profile>
  20. In [5]: user.profile.image
  21. Out[5]: <ImageFieldFile: profile_pics/images.png>
  23. In [6]: user.profile.width
  24. ---------------------------------------------------------------------------
  25. AttributeError                            Traceback (most recent call last)
  26. <ipython-input-6-cebf93d147df> in <module>()
  27. ----> 1 user.profile.width
  29. AttributeError: 'Profile' object has no attribute 'width'
  31. In [7]: user.profile.image.width
  32. Out[7]: 225
  34. In [8]: user.profile.image.url
  35. Out[8]: 'profile_pics/images.png'
  37. In [9]: user = User.objects.filter(username='TestUser').first()
  39. In [10]: user
  40. Out[10]: <User: TestUser>
  42. In [11]: user.profile
  43. Out[11]: <Profile: TestUser Profile>
  45. In [12]: user.profile.image
  46. Out[12]: <ImageFieldFile: default.jpg>
  48. In [13]: user.profile.image.width
  49. ---------------------------------------------------------------------------
  50. FileNotFoundError                         Traceback (most recent call last)
  51. <ipython-input-13-9ec2104e1768> in <module>()
  52. ----> 1 user.profile.image.width
  54. /usr/local/lib/python3.6/site-packages/django/core/files/images.py in width(self)
  55.      17     @property
  56.      18     def width(self):
  57. ---> 19         return self._get_image_dimensions()[0]
  58.      20 
  59.      21     @property
  61. /usr/local/lib/python3.6/site-packages/django/core/files/images.py in _get_image_dimensions(self)
  62.      26         if not hasattr(self, '_dimensions_cache'):
  63.      27             close = self.closed
  64. ---> 28             self.open()
  65.      29             self._dimensions_cache = get_image_dimensions(self, close=close)
  66.      30         return self._dimensions_cache
  68. /usr/local/lib/python3.6/site-packages/django/db/models/fields/files.py in open(self, mode)
  69.      72         self._require_file()
  70.      73         if getattr(self, '_file', None) is None:
  71. ---> 74             self.file = self.storage.open(self.name, mode)
  72.      75         else:
  73.      76             self.file.open(mode)
  75. /usr/local/lib/python3.6/site-packages/django/core/files/storage.py in open(self, name, mode)
  76.      31     def open(self, name, mode='rb'):
  77.      32         """Retrieve the specified file from storage."""
  78. ---> 33         return self._open(name, mode)
  79.      34 
  80.      35     def save(self, name, content, max_length=None):
  82. /usr/local/lib/python3.6/site-packages/django/core/files/storage.py in _open(self, name, mode)
  83.     216 
  84.     217     def _open(self, name, mode='rb'):
  85. --> 218         return File(open(self.path(name), mode))
  86.     219 
  87.     220     def _save(self, name, content):
  89. FileNotFoundError: [Errno 2] No such file or directory: '/root/SourceCode/Python/django_project/default.jpg'
  91. In [14]: user.profile.image.url
  92. Out[14]: 'default.jpg'

(we have created 2 profiles manually:

  • root has an imported image
  • TestUser uses default image, but that image is not set yet)

Media path:

  • To make sure our uploaded images are save in the right place
  • add 2 variables for django_project/settings.py: ```python

    …

where the uploaded files will be saved

media directory is in our base directory

MEDIA_ROOT = os.path.join(BASE_DIR, ‘media’) MEDIA_URL = ‘/media/‘

…

  1. to test, do another add profile with a picture:<br />![image.png](https://cdn.nlark.com/yuque/0/2020/png/1243266/1589337047580-ec8f288c-e577-4c2d-8e3f-1e82e6a47462.png#align=left&display=inline&height=163&margin=%5Bobject%20Object%5D&name=image.png&originHeight=325&originWidth=472&size=19073&status=done&style=none&width=236)<br />and now we have a folder for images called "profile_pics":<br />![image.png](https://cdn.nlark.com/yuque/0/2020/png/1243266/1589337100462-c109cffa-5f98-4631-aefd-954fa77609b0.png#align=left&display=inline&height=159&margin=%5Bobject%20Object%5D&name=image.png&originHeight=318&originWidth=331&size=15814&status=done&style=none&width=165.5)
  3. <a name="i4XYg"></a>
  4. #### Let profile show other information:
  6. - updates users/templates/users/profile.html:
  7. ```python
  8. {% extends "blog/base.html" %}
  9. {% load crispy_forms_tags %} 
  10. {% block content %}
  11.     <div class="content-section">
  12.       <div class="media">
  13.         <img class="rounded-circle account-img" src="{{ user.profile.image.url }}">
  14.         <div class="media-body">
  15.           <h2 class="account-heading">{{ user.username }}</h2>
  16.           <p class="text-secondary">{{ user.email }}</p>
  17.         </div>
  18.       </div>
  19.       <!-- FORM HERE -->
  20.     </div>
  21. {% endblock content %}

May. 13

(continue)
modify django_project/urls.py:

  1. from django.contrib import admin
  2. from django.urls import path
  3. from django.conf.urls import include 
  4. from users import views as user_views
  5. from django.contrib.auth import views as auth_views 
  7. from django.conf import settings # new
  8. from django.conf.urls.static import static # new
  10. urlpatterns = [
  11.     path('admin/', admin.site.urls),
  12.     path('register/', user_views.register, name = 'register'), 
  13.     path('profile/', user_views.profile, name = 'profile'), 
  14.     path('login/', auth_views.LoginView.as_view(template_name='users/login.html'), name = 'login'), 
  15.     path('logout/', auth_views.LogoutView.as_view(template_name='users/logout.html'), name = 'logout'), 
  16.     path('', include('blog.urls')) 
  17. ]
  19. # if it is in debug mode
  20. if settings.DEBUG:
  21.     urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

and now in profile section, we have more info:
image.png

Upload and apply default user image:

  • Upload a “default.jpg” in media folder(same as the name in users/models.py), and it would be the default image for users who hasn’t upload images:

image.png

Create new profile right after registeration:

  • create users/signals.py for this function: ```python from django.db.models.signals import post_save from django.contrib.auth.models import User from django.dispatch import receiver from .models import Profile

@receiver(post_save, sender=User) def create_profile(sender, instance, created, **kwargs): if created: Profile.objects.create(user=instance)

@receiver(post_save, sender=User) def save_profile(sender, instance, **kwargs): instance.profile.save()

  2. - and to import signal.py when a new user is registered, we extend users/apps.py:
  3. ```python
  4. from django.apps import AppConfig
  7. class UsersConfig(AppConfig):
  8.     name = 'users'
  10.     def ready(self): # new
  11.         import users.signals

to test, create a new user and see its profile:
image.png

May. 14

Update profile page:

  • This time we have to allow users update their profile information and image.
  • we add 2 new forms in users/forms.py for later use: ```python from django import forms from django.contrib.auth.models import User from django.contrib.auth.forms import UserCreationForm from .models import Profile # new

…

class UserUpdateForm(forms.ModelForm): email = forms.EmailField()

  1. class Meta:
  2.     model = User
  3.     fields = ['username', 'email']

class ProfileUpdateForm(forms.ModelForm): class Meta: model = Profile fields = [‘image’]

  2. - include UserUpdateForm and ProfileUpdateForm above
  3. - and extend profile in users/view.py:
  4. ```python
  5. from django.shortcuts import render, redirect 
  6. from django.contrib import messages
  7. from django.contrib.auth.decorators import login_required
  8. from .forms import UserRegisterForm, UserUpdateForm, ProfileUpdateForm # new
  10. # ...
  12. @login_required
  13. def profile(request):
  14.     u_form = UserUpdateForm()
  15.     p_form = ProfileUpdateForm()
  17.     context = {
  18.         'u_form' : u_form,
  19.         'p_form' : p_form
  20.     }
  22.     return render(request, 'users/profile.html', context)

  • add a form class in profile.html of templates (similar to register.html):

    1. {% extends "blog/base.html" %}
    2. {% load crispy_forms_tags %} 
    3. {% block content %}
    4.   <div class="content-section">
    5.     <div class="media">
    6.       <img class="rounded-circle account-img" src="{{ user.profile.image.url }}">
    7.       <div class="media-body">
    8.         <h2 class="account-heading">{{ user.username }}</h2>
    9.         <p class="text-secondary">{{ user.email }}</p>
    10.       </div>
    11.     </div>
    13.     <form method="POST" enctype="multipart/form-data">
    14.       {% csrf_token %}
    16.       <fieldset class="form-group">
    17.         <legend class="border-bottom mb-4">Profile Info</legend>
    18.         {{ u_form|crispy }} 
    19.         {{ p_form|crispy }} 
    20.       </fieldset>
    22.       <div class="form-group">
    23.         <button class="btn btn-outline-info" type="submit">Update</button>
    24.       </div>
    26.     </form>
    28.   </div>
    29. {% endblock content %}

    and our profile page has imported u_from and p_form:
    image.png

    Actually update profile information:

    extend profile in users/view.py: ```python

    …

@login_required def profile(request): if request.method == ‘POST’: # only create update forms if there is a POST request u_form = UserUpdateForm(request.POST, instance=request.user) p_form = ProfileUpdateForm(request.POST, request.FILES, instance=request.user.profile) if u_form.is_valid() and p_form.is_valid(): # check u_form.save() p_form.save() messages.success(request, f’Your account has been updated!’) return redirect(‘profile’) # redirect to the profile page

  1. else:
  2.     u_form = UserUpdateForm(instance=request.user)
  3.     p_form = ProfileUpdateForm(instance=request.user.profile)
  5. context = {
  6.     'u_form' : u_form,
  7.     'p_form' : p_form
  8. }
  10. return render(request, 'users/profile.html', context)
  1. and the update page actually works:<br />![image.png](https://cdn.nlark.com/yuque/0/2020/png/1243266/1589513742346-cec93694-9095-46c1-8c3b-1f432092e8cb.png#align=left&display=inline&height=388&margin=%5Bobject%20Object%5D&name=image.png&originHeight=776&originWidth=1535&size=82069&status=done&style=none&width=767.5)
  2. <a name="B20zh"></a>
  3. #### Resize images:
  5. - modify users/models.py to make images are resized into 300px * 300px:
  6. ```python
  7. from django.db import models
  8. from django.contrib.auth.models import User 
  9. from PIL import Image # new
  11. # ...
  13.     def save(self):
  14.         super().save()
  16.         img = Image.open(self.image.path)
  18.         if img.height > 300 or img.width > 300:
  19.             output_size = (300, 300)
  20.             img.thumbnail(output_size)
  21.             img.save(self.image.path)

we re-upload images before, and there will be a resized image in /media (if height or width > 300px):
image.png

Put user images in posts:

  • in blog folder, modify the template of home.html:
    1. <!--...-->
    2. <article class="media content-section">
    3.   <img class="rounded-circle article-img" src="{{ post.author.profile.image.url }}">
    4.   <div class="media-body">
    5. <!--...-->
    after that, blog page will show images of users in the post as a small rounded-circle:
    image.png

May. 15 - 21

views.home to PostListView:

  • Define a “PostListView” to redirect ListView in /blog/view.py: ```python from django.shortcuts import render from django.views.generic import ListView # new from .models import Post

    …

    def home(request): context = {
    1.   'posts': Post.objects.all()
    } return render(request, ‘blog/home.html’, context)

class PostListView(ListView): # new model = Post templatename = ‘blog/home.html’ # /.html context_object_name = ‘posts’ # rename from the default name into ‘posts’ ordering = [‘-date_posted’] # order from newest to oldest

…

  1. for now, we could think like def home() and class PostListView() do the same thing. 
  3. - as above, the template name is 'blog/home.html', so we can apply PostListView in /blog/urls.py to replace views.home: 
  4. ```python
  5. from django.urls import path
  6. from .views import PostListView # new
  7. from . import views
  9. urlpatterns = [
  10.     # path('', views.home, name='blog-home'),
  11.     path('', PostListView.as_view(), name='blog-home'), # new
  12.     path('about/', views.about, name='blog-about'),
  13. ]

to test, use a browser and the url is localhost:8000
image.png
then the replacement is successful.

View for individual posts:

  • Define a “PostDetailView” in /blog/view.py: 

    1. from django.shortcuts import render 
    2. from django.views.generic import ListView, DetailView # new
    3. from .models import Post
    4. #...
    5. class PostDetailView(DetailView): # new
    6.   model = Post
    7. #...

  • apply PostDetailView in /blog/urls.py: ```python from django.urls import path from .views import PostListView, PostDetailView # new from . import views

urlpatterns = [ path(‘’, PostListView.as_view(), name=’blog-home’), path(‘post//‘, PostDetailView.as_view(), name=’post-detail’), # new, “pk” as “primary key of the post” path(‘about/‘, views.about, name=’blog-about’), ]

  2. - Since we have no corresponding post detail template, create a post_detail.html in /templates:
  3. ```html
  4. {% extends "blog/base.html" %}
  5. {% block content %}
  6.     <article class="media content-section">
  7.        <img class="rounded-circle article-img" src="{{ object.author.profile.image.url }}">
  8.        <div class="media-body">
  9.             <div class="article-metadata">
  10.             <a class="mr-2" href="#">{{ object.author }}</a>
  11.             <small class="text-muted">{{ object.date_posted|date:"F d, Y" }}</small>
  12.              </div>
  13.             <h2 class="article-title">{{ object.title }}</a></h2>
  14.             <p class="article-content">{{ object.content }}</p>
  15.         </div>
  16.     </article>  
  17. {% endblock content %}

to test, first see localhost:8000
image.png
localhost:8000/post/1
image.png
and we have our first sent (measure in send instead of update time) blog.

Blog-home to Blog-post:

  • Add the detail of href in home.html to let titles of blogs connect to corresponding post page:

    1. <!--...-->
    2. <!--<h2><a class="article-title" href="#">{{ post.title }}</a></h2>-->
    3. <h2><a class="article-title" href="{% url 'post-detail' post.id %}">{{ post.title }}</a></h2>
    4. <!--...-->

    to test, restart the server click a blog title:
    image.png
    then we see it’s successfully redirect to the post.
    image.png

    CreateView:

  • as usual, create PostCreateView in /blog/view.py: ```python from django.shortcuts import render from django.views.generic import ( ListView, DetailView, CreateView # new ) from .models import Post

…

class PostCreateView(CreateView): # new model = Post fields = [‘title’, ‘content’]

  1. def form_valid(self, form): # test valid user
  2.     form.instance.author = self.request.user
  3.     return super().form_valid(form)
  2. - create a new path in /blog/urls.py:
  3. ```python
  4. from django.urls import path
  5. from .views import (
  6.     PostListView, 
  7.     PostDetailView,
  8.     PostCreateView # new
  9. )
  10. from . import views
  12. urlpatterns = [
  13.     path('', PostListView.as_view(), name='blog-home'),
  14.     path('post/<int:pk>/', PostDetailView.as_view(), name='post-detail'), 
  15.     path('post/new/', PostCreateView.as_view(), name='post-create'), # new
  16.     path('about/', views.about, name='blog-about'),
  17. ]

  • create a new template post_form.html

    1. {% extends "blog/base.html" %}
    2. {% load crispy_forms_tags %} 
    3. {% block content %}
    4.   <div class="content-section">
    5.       <form method="POST">
    6.           {% csrf_token %}
    8.           <fieldset class="form-group">
    9.               <legend class="border-bottom mb-4">Blog Post</legend>
    10.              {{ form|crispy }} 
    11.           </fieldset>
    13.           <div class="form-group">
    14.               <button class="btn btn-outline-info" type="submit">Post</button>
    15.           </div>
    17.       </form>
    18.   </div>
    19. {% endblock content %}

  • finally, add a function in /blog/models.py to make sure after the new post is sent, the page can jump to the post detail:

    1. from django.db import models
    2. from django.utils import timezone
    3. from django.contrib.auth.models import User
    4. from django.urls import reverse # new
    5. # ...
    6. class Post(models.Model):
    7. # ...
    8.   def get_absolute_url(self): # new
    9.       return reverse('post-detail', kwargs={'pk': self.pk})

    to test, use localhost:8000/post/new to send a new post:
    image.png
    and get into the next post (url id is 5 because I just sent another blog before):
    image.png

  • Also, if the current situation is logout, add a checking step in /blog/views.py:

    1. from django.shortcuts import render 
    2. from django.contrib.auth.mixins import LoginRequiredMixin # new
    3. from django.views.generic import (
    4.   ListView, 
    5.   DetailView,
    6.   CreateView
    7. )
    8. from .models import Post
    9. # ...
    10. class PostCreateView(LoginRequiredMixin, CreateView): # new
    11.   model = Post
    12.   fields = ['title', 'content']
    14.   def form_valid(self, form):
    15.       form.instance.author = self.request.user
    16.       return super().form_valid(form)

    after the step you will get back to login page, if you are not logged in and access localhost:8000/post/new

Update post:

  • /blog/views.py:

    1. from django.shortcuts import render 
    2. from django.contrib.auth.mixins import LoginRequiredMixin, UserPassesTestMixin # new
    3. from django.views.generic import (
    4.   ListView, 
    5.   DetailView,
    6.   CreateView,
    7.   UpdateView # new
    8. )
    9. from .models import Post
    10. # ...
    11. class PostUpdateView(LoginRequiredMixin, UserPassesTestMixin, UpdateView): # new
    12.   model = Post
    13.   fields = ['title', 'content']
    15.   def form_valid(self, form): # to make sure login required
    16.       form.instance.author = self.request.user
    17.       return super().form_valid(form)
    19.   def test_func(self): # to make sure the post is sent by the current updating user
    20.       post = self.get_object()
    21.       if self.request.user == post.author:
    22.           return True
    23.       return False

  • apply PostUpdateView in /blog/urls.py: ```python from django.urls import path from .views import ( PostListView, PostDetailView, PostCreateView, PostUpdateView # new ) from . import views

urlpatterns = [ path(‘’, PostListView.as_view(), name=’blog-home’), path(‘post//‘, PostDetailView.as_view(), name=’post-detail’), path(‘post/new/‘, PostCreateView.as_view(), name=’post-create’), path(‘post//update’, PostUpdateView.as_view(), name=’post-update’), # new path(‘about/‘, views.about, name=’blog-about’), ]

  1. to test, update by localhost:8000/post/5/update<br />(actually send a new post or update both apply the template "post_form.html")<br />![image.png](https://cdn.nlark.com/yuque/0/2020/png/1243266/1590103415571-934e5346-821e-4ab4-b86d-24a502c232e2.png#align=left&display=inline&height=367&margin=%5Bobject%20Object%5D&name=image.png&originHeight=734&originWidth=1610&size=60824&status=done&style=none&width=805)<br />successful:<br />![image.png](https://cdn.nlark.com/yuque/0/2020/png/1243266/1590103436267-1b006e9c-b9fb-43e4-b2f0-340a24faf6a9.png#align=left&display=inline&height=304&margin=%5Bobject%20Object%5D&name=image.png&originHeight=607&originWidth=1582&size=51506&status=done&style=none&width=791)<br />and if access/post/3/update (Post 3 is not sent by curren logged in account)<br />![image.png](https://cdn.nlark.com/yuque/0/2020/png/1243266/1590103633227-e6ad15e8-f7b0-4fff-a40e-f85730d3d2f2.png#align=left&display=inline&height=110&margin=%5Bobject%20Object%5D&name=image.png&originHeight=219&originWidth=466&size=9608&status=done&style=none&width=233)
  2. <a name="H0p5K"></a>
  3. #### Delete post: 
  5. - again, use the pattern before
  6. - /blog/views.py for a new view:
  7. ```python
  8. from django.shortcuts import render
  9. from django.contrib.auth.mixins import LoginRequiredMixin, UserPassesTestMixin
  10. from django.views.generic import (
  11.     ListView,
  12.     DetailView,
  13.     CreateView,
  14.     UpdateView,
  15.     DeleteView # new
  16. )
  17. from .models import Post
  19. # ... 
  21. class PostDeleteView(LoginRequiredMixin, UserPassesTestMixin, DeleteView): # new
  22.     model = Post
  23.     success_url = '/' # if delete success, get back to blog-home
  25.     def test_func(self):
  26.         post = self.get_object()
  27.         if self.request.user == post.author:
  28.             return True
  29.         return False
  • apply PostDeleteView in /blog/urls.py ```python from django.urls import path from .views import ( PostListView, PostDetailView, PostCreateView, PostUpdateView, PostDeleteView # new ) from . import views

urlpatterns = [ path(‘’, PostListView.as_view(), name=’blog-home’), path(‘post//‘, PostDetailView.as_view(), name=’post-detail’), path(‘post/new/‘, PostCreateView.as_view(), name=’post-create’), path(‘post//update’, PostUpdateView.as_view(), name=’post-update’), path(‘post//delete/‘, PostDeleteView.as_view(), name=’post-delete’), # new path(‘about/‘, views.about, name=’blog-about’), ]

  2. - a template called "post_confirm_delete.html" for a separate delete page:
  3. - Here we have a headline to notice user to make sure they want to delete, and a cancel button to get back to the post detail page:
  4. ```html
  5. {% extends "blog/base.html" %}
  6. {% block content %}
  7.     <div class="content-section">
  8.         <form method="POST">
  9.             {% csrf_token %}
  11.             <fieldset class="form-group">
  12.                 <legend class="border-bottom mb-4">Delete Post</legend>
  13.                 <h2>Are you sure you want to delete the post "{{ object.title }}"</h2>
  14.             </fieldset>
  16.             <div class="form-group">
  17.                 <button class="btn btn-outline-danger" type="submit">Yes, Delete</button> <!--"btn btn-outline-danger" can create a warning red button-->
  18.                 <a class="btn btn-outline-secondary" href="{% url 'post-detail' object.id %}">Cancel</a>
  19.             </div>
  21.         </form>
  22.     </div>
  23. {% endblock content %}

to test, I want to delete this accidentally created post 4:
image.png
use “Yes, Delete” in localhost:8000/post/4/delete/
image.png
and the delete is success, get back to the blog-home page:
image.png

May. 22

Buttons for create/update/delete views:

  • base.html in templates:

    1. <!--...-->
    2. {% if user.is_authenticated %}
    3.   <a class="nav-item nav-link" href="{% url 'post-create' %}">New Post</a> <!--new-->
    4.   <a class="nav-item nav-link" href="{% url 'profile' %}">Profile</a>
    5.   <a class="nav-item nav-link" href="{% url 'logout' %}">Logout</a>
    6. {% else %}
    7. <!--...-->

  • post_detail.html in templates:

    1. <!--...-->
    2. <small class="text-muted">{{ object.date_posted|date:"F d, Y" }}</small>
    3.   {% if object.author == user %}
    4.       <div>
    5.           <a class="btn btn-secondary btn-sm mt-1 mb-1" href="{% url 'post-update' object.id %}">Update</a>
    6.           <a class="btn btn-danger btn-sm mt-1 mb-1" href="{% url 'post-delete' object.id %}">Delete</a>
    7.       </div>
    8.   {% endif %}
    9. <!--...-->

    now we have corresponding buttons for 3 methods:
    image.png
    image.png

    About Pagination:

  • “Page->Paginate->Pagination” means split texts into multiple pages.

  • We need pagination if there are too many contents.

  • First we need enough data to simulate that situation, and here we download a “posts.json” in github: https://github.com/CoreyMSchafer/code_snippets/blob/master/Django_Blog/11-Pagination/django_project/posts.json

  • import the content:
    1. [root@localhost django_project]# python manage.py shell
    2. >>> import json
    3. >>> from blog.models import Post
    4. >>> with open('posts.json') as f:
    5. ...     posts_json = json.load(f)
    6. ... 
    7. >>> for post in posts_json: 
    8. ...     post = Post(title=post['title'], content=post['content'], author_id=post['user_id'])
    9. ...     post.save()
    10. ... 
    11. >>> exit()
    then runserver to see blog-home page.
    image.png
    and it’s successful.

so here we have a example to apply paginator:

  1. [root@localhost django_project]# python manage.py shell
  2. >>> from django.core.paginator import Paginator
  3. >>> posts = ['1', '2', '3', '4', '5'] # We have 5 posts
  4. >>> p = Paginator(posts, 2) # paginate posts into 2 posts 1 page
  5. >>> p.num_pages # int(5/2) = 3
  6. 3
  7. >>> for page in p.page_range:
  8. ...     print(page)
  9. ... 
  10. 1
  11. 2
  12. 3
  13. >>> p1 = p.page(1)
  14. >>> p1
  15. <Page 1 of 3>
  16. >>> p1.number
  17. 1
  18. >>> p1.object_list # list of objects on this page
  19. ['1', '2']
  20. >>> p1.has_previous() # has the previous page
  21. False
  22. >>> p1.has_next() # has the next page
  23. True
  24. >>> p1.next_page_number()
  25. 2
  26. >>> exit()

Apply Pagination:

  • it’s simple to apply paginate in /blog/views.py:

    1. # ...
    2. class PostListView(ListView):
    3.   model = Post
    4.   template_name = 'blog/home.html'
    5.   context_object_name = 'posts'
    6.   ordering = ['-date_posted']
    7.   paginate_by = 2 # new
    8. # ...

    and we can see blog home page only has 2 blogs now:
    image.png
    but because we have no corresponding buttons to the previous or to the next page, we only have do that by add page number(add /?page=[page number]):
    image.png
    also, we would receive a 404 not found is the page number does not exist.


    Change the page number:

  • a bit compliated if else relationship

  • add those lines in home.html in templates: ```html {% if is_paginated %}

    {% if page_obj.has_previous %}

    1.   <a class="btn btn-outline-info mb-4" href="?page=1">First</a>
    2.   <a class="btn btn-outline-info mb-4" href="?page={{ page_obj.previous_page_number }}">Previous</a>

    {% endif %}

    {% for num in page_obj.paginator.page_range %}

    1.   {% if page_obj.number == num %}
    2.       <a class="btn btn-info mb-4" href="?page={{ num }}">{{ num }}</a>
    3.   {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
    4.       <a class="btn btn-outline-info mb-4" href="?page={{ num }}">{{ num }}</a>
    5.   {% endif %}

    {% endfor %}

    {% if page_obj.has_next %}

    1.   <a class="btn btn-outline-info mb-4" href="?page={{ page_obj.next_page_number }}">Next</a>
    2.   <a class="btn btn-outline-info mb-4" href="?page={{ page_obj.paginator.num_pages }}">Last</a>

    {% endif %}

{% endif %}

  1. to test, runserver (now paginate_by = 5 instead of 2):<br />![image.png](https://cdn.nlark.com/yuque/0/2020/png/1243266/1590191493993-122c832d-62c9-484f-a212-06ea6c0b7d01.png#align=left&display=inline&height=411&margin=%5Bobject%20Object%5D&name=image.png&originHeight=821&originWidth=1223&size=102071&status=done&style=none&width=611.5)
  3. <a name="DCvCM"></a>
  4. ### May. 23
  5. <a name="UL3mm"></a>
  6. #### User post page:
  8. - we want to get a function to show posts from a filtered user only.
  9. - update /blog/views.py for a UserPostListView: 
  10. ```python
  11. from django.shortcuts import render, get_object_or_404 # new
  12. from django.contrib.auth.models import User # new
  13. from django.contrib.auth.mixins import LoginRequiredMixin, UserPassesTestMixin
  14. from django.views.generic import (
  15.     ListView,
  16.     DetailView,
  17.     CreateView,
  18.     UpdateView,
  19.     DeleteView 
  20. )
  21. from .models import Post
  23. # ...
  25. class UserPostListView(ListView):
  26.     model = Post
  27.     template_name = 'blog/user_posts.html' 
  28.     context_object_name = 'posts'
  29.     paginate_by = 5
  31.     def get_queryset(self): # to avoid if cannot find the user
  32.         user = get_object_or_404(User, username=self.kwargs.get('username'))
  33.         return Post.objects.filter(author=user).order_by('-date_posted') # order from newest to oldest
  35. # ...
  • in /blog/urls.py import that view: ```python from django.urls import path from .views import ( PostListView, PostDetailView, PostCreateView, PostUpdateView, PostDeleteView, UserPostListView # new ) from . import views

urlpatterns = [ path(‘’, PostListView.as_view(), name=’blog-home’), path(‘user/‘, UserPostListView.as_view(), name=’user-posts’), # new path(‘post//‘, PostDetailView.as_view(), name=’post-detail’), path(‘post/new/‘, PostCreateView.as_view(), name=’post-create’), path(‘post//update’, PostUpdateView.as_view(), name=’post-update’), path(‘post//delete/‘, PostDeleteView.as_view(), name=’post-delete’), path(‘about/‘, views.about, name=’blog-about’), ]

  2. - a new template user_posts.html (based on home.html):
  3. ```html
  4. {% extends "blog/base.html" %}
  5. {% block content %}
  6.     <h1 class="mb-3">Posts by {{ view.kwargs.username }} ({{ page_obj.paginator.count }})</h1>
  7.     {% for post in posts %}
  8.         <article class="media content-section">
  9.            <img class="rounded-circle article-img" src="{{ post.author.profile.image.url }}">
  10.             <div class="media-body">
  11.                 <div class="article-metadata">
  12.                 <a class="mr-2" href="{% url 'user-posts' post.author.username %}">{{ post.author }}</a>
  13.                 <small class="text-muted">{{ post.date_posted|date:"F d, Y" }}</small>
  14.                 </div>
  15.                 <h2><a class="article-title" href="{% url 'post-detail' post.id %}">{{ post.title }}</a></h2>
  16.                 <p class="article-content">{{ post.content }}</p>
  17.             </div>
  18.         </article>  
  19.     {% endfor %}
  21.     {% if is_paginated %}
  23.         {% if page_obj.has_previous %}
  24.             <a class="btn btn-outline-info mb-4" href="?page=1">First</a>
  25.             <a class="btn btn-outline-info mb-4" href="?page={{ page_obj.previous_page_number }}">Previous</a>
  26.         {% endif %}
  28.         {% for num in page_obj.paginator.page_range %}
  29.             {% if page_obj.number == num %}
  30.                 <a class="btn btn-info mb-4" href="?page={{ num }}">{{ num }}</a>
  31.             {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
  32.                 <a class="btn btn-outline-info mb-4" href="?page={{ num }}">{{ num }}</a>
  33.             {% endif %}
  34.         {% endfor %}
  36.         {% if page_obj.has_next %}
  37.             <a class="btn btn-outline-info mb-4" href="?page={{ page_obj.next_page_number }}">Next</a>
  38.             <a class="btn btn-outline-info mb-4" href="?page={{ page_obj.paginator.num_pages }}">Last</a>
  39.         {% endif %}
  41.     {% endif %}
  43. {% endblock content %}
  • in post_deatils.html template, add the author href before:
    1. <a class="mr-2" href="{% url 'user-posts' object.author.username %}">{{ object.author }}</a>
    2. <!--<a class="mr-2" href="#">{{ object.author }}</a>-->
    to test, runserver and use url http://localhost:8000/user/[username]
    image.png
    and the page is filtered by the user, while only posts sent by that user are shown.

also, if we click the username in a post:
image.png
…we get into that user’s post page:
image.png

May. 25

Password reset:

  • to simulate sometimes a user have to reset the password

  • First, we need a new pattern for this function in /django_project/urls.py:

    1. # ...
    2. urlpatterns = [
    3.   path('admin/', admin.site.urls),
    4.   path('register/', user_views.register, name = 'register'), 
    5.   path('profile/', user_views.profile, name = 'profile'), 
    6.   path('login/', auth_views.LoginView.as_view(template_name='users/login.html'), name = 'login'), 
    7.   path('logout/', auth_views.LogoutView.as_view(template_name='users/logout.html'), name = 'logout'), 
    8.   path('password-reset/', 
    9.       auth_views.PasswordResetView.as_view(template_name='users/password_reset.html'), 
    10.       name = 'password_reset'), # new
    11.   path('', include('blog.urls')) 
    12. ]
    13. # ...

  • a corresponding template called “password_reset.html” in /users:

    1. {% extends "blog/base.html" %}
    2. {% load crispy_forms_tags %} 
    3. {% block content %}
    4.  <div class="content-section">
    5.      <form method="POST">
    6.          {% csrf_token %}
    8.          <fieldset class="form-group">
    9.              <legend class="border-bottom mb-4">Reset Password</legend>
    10.             {{ form|crispy }} 
    11.          </fieldset>
    13.          <div class="form-group">
    14.              <button class="btn btn-outline-info" type="submit">Request Password Reset</button>
    15.          </div>
    17.      </form>
    19.  </div>
    20. {% endblock content %}

    this page is bascially changed from login.html in users templates.

  • so it’s not enough to reset the password, we need more detailed templates.

  • a new pattern for “send email to the address” in /django_project/urls.py:

    1. # ...
    2. urlpatterns = [
    3.   path('admin/', admin.site.urls),
    4.   path('register/', user_views.register, name = 'register'), 
    5.   path('profile/', user_views.profile, name = 'profile'), 
    6.   path('login/', auth_views.LoginView.as_view(template_name='users/login.html'), name = 'login'), 
    7.   path('logout/', auth_views.LogoutView.as_view(template_name='users/logout.html'), name = 'logout'), 
    8.   path('password-reset/', 
    9.       auth_views.PasswordResetView.as_view(
    10.           template_name='users/password_reset.html'
    11.       ), 
    12.       name = 'password_reset'),
    13.    path('password-reset/done/', 
    14.       auth_views.PasswordResetDoneView.as_view(
    15.           template_name='users/password_reset_done.html'
    16.       ), 
    17.       name = 'password_reset_done'), # new
    18.   path('', include('blog.urls')) 
    19. ]
    20. # ...

  • a corresponding template “password_reset_done.html” in /users:

    1. {% extends "blog/base.html" %}
    2. {% block content %}
    3.   <div class="alert alert-info">
    4.       An email has been sent with instructions to reset your password
    5.   </div>
    6. {% endblock content %}

  • then we require a confirmation page for password reset,

  • a new pattern in /django_project/urls.py:

    1. # ...
    2. urlpatterns = [
    3.   path('admin/', admin.site.urls),
    4.   path('register/', user_views.register, name = 'register'), 
    5.   path('profile/', user_views.profile, name = 'profile'), 
    6.   path('login/', auth_views.LoginView.as_view(template_name='users/login.html'), name = 'login'), 
    7.   path('logout/', auth_views.LogoutView.as_view(template_name='users/logout.html'), name = 'logout'), 
    8.   path('password-reset/', 
    9.       auth_views.PasswordResetView.as_view(
    10.           template_name='users/password_reset.html'
    11.       ), 
    12.       name = 'password_reset'),
    13.    path('password-reset/done/', 
    14.       auth_views.PasswordResetDoneView.as_view(
    15.           template_name='users/password_reset_done.html'
    16.       ), 
    17.       name = 'password_reset_done'),
    18.   path('password-reset-confirm/<uidb64>/<token>/',
    19.        auth_views.PasswordResetConfirmView.as_view(
    20.            template_name='users/password_reset_confirm.html'
    21.        ),
    22.        name='password_reset_confirm'), # new
    23.   path('', include('blog.urls')) 
    24. ]
    25. # ...

  • a corresponding template “password_reset_confirm.html” in /users:

    1. {% extends "blog/base.html" %}
    2. {% load crispy_forms_tags %}
    3. {% block content %}
    4.   <div class="content-section">
    5.       <form method="POST">
    6.           {% csrf_token %}
    7.           <fieldset class="form-group">
    8.               <legend class="border-bottom mb-4">Reset Password</legend>
    9.               {{ form|crispy }}
    10.           </fieldset>
    11.           <div class="form-group">
    12.               <button class="btn btn-outline-info" type="submit">Reset Password</button>
    13.           </div>
    14.       </form>
    15.   </div>
    16. {% endblock content %}

  • and we need to tell the user the password reset is done.

  • in /django_project/urls.py:

    1. urlpatterns = [
    2.   path('admin/', admin.site.urls),
    3.   path('register/', user_views.register, name = 'register'), 
    4.   path('profile/', user_views.profile, name = 'profile'), 
    5.   path('login/', auth_views.LoginView.as_view(template_name='users/login.html'), name = 'login'), 
    6.   path('logout/', auth_views.LogoutView.as_view(template_name='users/logout.html'), name = 'logout'), 
    7.   path('password-reset/', 
    8.       auth_views.PasswordResetView.as_view(
    9.           template_name='users/password_reset.html'
    10.       ), 
    11.       name = 'password_reset'),
    12.    path('password-reset/done/', 
    13.       auth_views.PasswordResetDoneView.as_view(
    14.           template_name='users/password_reset_done.html'
    15.       ), 
    16.       name = 'password_reset_done'),
    17.   path('password-reset-confirm/<uidb64>/<token>/',
    18.        auth_views.PasswordResetConfirmView.as_view(
    19.            template_name='users/password_reset_confirm.html'
    20.        ),
    21.        name='password_reset_confirm'),
    22.   path('password-reset-complete/',
    23.        auth_views.PasswordResetCompleteView.as_view(
    24.            template_name='users/password_reset_complete.html'
    25.        ),
    26.        name='password_reset_complete'), # new
    27.   path('', include('blog.urls')) 
    28. ]

  • and a new template “password_reset_complete.html” in /users:

    1. {% extends "blog/base.html" %}
    2. {% block content %}
    3.   <div class="alert alert-info">
    4.       Your password has been set.
    5.   </div>
    6.   <a href="{% url 'login' %}">Sign In Here</a>
    7. {% endblock content %}

  • finally, we need a “forgot password?” in users/login.html:

    1. <!--...-->
    2.           <div class="form-group">
    3.               <button class="btn btn-outline-info" type="submit">Login</button>
    4.               <small class="text-muted ml-2">
    5.                   <a href="{% url 'password_reset' %}">Forgot Password?</a>
    6.               </small>
    7.           </div>
    8. <!--...-->

    save() method adjust:

  • we would apply some default values on save() in /users/models.py:

    1. # ...
    2.   # def save(self):
    3.   def save(self, force_insert=False, force_update=False, using=None):
    4.       super().save()
    5. # ...

    Send reset mails:

  • set sender side in /django_project/settings.py:

    1. # ...
    2. EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend' 
    3. EMAIL_HOST = 'smtp.gmail.com'
    4. EMAIL_PORT = 587
    5. EMAIL_USE_TLS = True
    6. EMAIL_HOST_USER = os.environ.get('EMAIL_USER')
    7. EMAIL_HOST_PASSWORD = os.environ.get('EMAIL_PASS')

    Caution**: I am doing this project in a virtual machine, so that “os.environ.get(‘EMAIL_USER’)” and “os.environ.get(‘EMAIL_PASS’)” would get nothing. As a result, I changed EMAIL_HOST_USER and EMAIL_HOST_PASSWORD to a useable gmail account and password, while I changed my setting of google account to allow access from less secure apps**, but I suggest you turn that off after the test.

To test, create an account with that “allowed less secure access” email address above.
use “Forgot Password? button” or localhost:8000/password-reset/ to send that request:
image.png

in the mailbox we got an confirmation mail:
image.png
use the link to complete that reset:
image.png

May. 26

modify /users/models.py:

  • change /users/models.py again to allow any arbitrary number of positional or keyword arguments:

    1. # ...
    2.   # def save(self, force_insert=False, force_update=False, using=None):
    3.   def save(self, *args, **kawrgs):
    4.       #super().save()
    5.       super().save(*args, **kawrgs)
    6. # ...

    Deploy to a Linux Server(server deployment):

  • For the program right now, we have a basically complete application that is eligible to be deployed online instead of just use a virtual machine.

  • To accomplish that, this time we apply “linode”, first we create an account and we see this UI:

image.png
“Linodes” to create a new server:
image.png
copy SSH Access in networking and use a terminal to access the server.

  • after ssh, update & upgrade (I use ubuntu):

    1. root@localhost:~# apt-get update && apt-get upgrade

  • reset hostname:

    1. root@localhost:~# hostnamectl set-hostname django-server
    2. root@localhost:~# hostname
    3. django-server

  • use “nano” to add the ssh path before into /etc/hosts:

    1. root@localhost:~# nano /etc/hosts

    image.png

  • add a new user “coreyms”, and treat it as sudo: ``bash root@localhost:~# adduser coreyms Adding usercoreyms’ … Adding new group coreyms' (1000) ... Adding new usercoreyms’ (1000) with group coreyms' ... Creating home directory/home/coreyms’ … Copying files from `/etc/skel’ … New password: Retype new password: passwd: password updated successfully Changing the user information for coreyms Enter the new value, or press ENTER for the default Full Name []: Corey Schafer Room Number []: Work Phone []: Home Phone []: Other []: Is the information correct? [Y/n] Y

root@localhost:~# adduser coreyms sudo Adding user coreyms' to groupsudo’ … Adding user coreyms to group sudo Done.

  1. and we can just log into coreyms next with ssh next time:
  2. ```bash
  3. [root@localhost django_project]# ssh coreyms@172.105.102.73
  4. coreyms@172.105.102.73's password:

  • make a ~/.ssh root directory:

    1. coreyms@django-server:~$ pwd
    2. /home/coreyms
    3. coreyms@django-server:~$ mkdir -p ~/.ssh
    4. coreyms@django-server:~$ ls -la
    5. total 32
    6. drwxr-xr-x 5 coreyms coreyms 4096 May 28 15:42 .
    7. drwxr-xr-x 3 root    root    4096 May 28 14:34 ..
    8. -rw-r--r-- 1 coreyms coreyms  220 May 28 14:34 .bash_logout
    9. -rw-r--r-- 1 coreyms coreyms 3771 May 28 14:34 .bashrc
    10. drwx------ 2 coreyms coreyms 4096 May 28 14:52 .cache
    11. drwx------ 3 coreyms coreyms 4096 May 28 14:52 .gnupg
    12. -rw-r--r-- 1 coreyms coreyms  807 May 28 14:34 .profile
    13. drwxrwxr-x 2 coreyms coreyms 4096 May 28 15:42 .ssh

  • open another terminal to generate rsa key:

    1. [root@localhost ~]# ssh-keygen -b 4096
    2. Generating public/private rsa key pair.
    3. Enter file in which to save the key (/root/.ssh/id_rsa): 
    4. Enter passphrase (empty for no passphrase): 
    5. Enter same passphrase again: 
    6. Your identification has been saved in /root/.ssh/id_rsa.
    7. Your public key has been saved in /root/.ssh/id_rsa.pub.

  • access coreyms by ssh and securely copy the key

  • then change file modes of ssh:
    ```bash [root@localhost ~]# scp /root/.ssh/id_rsa.pub coreyms@172.105.102.73:~/.ssh/authorized_keys coreyms@172.105.102.73’s password: id_rsa.pub 100% 752 0.7KB/s 00:00

another terminal

coreyms@django-server:~$ ls .ssh authorized_keys coreyms@django-server:~$ sudo chmod 700 ~/.ssh/ [sudo] password for coreyms: coreyms@django-server:~$ sudo chmod 600 ~/.ssh/*

  2. - modify the config of sshd, and restart sshd:
  3. ```bash
  4. coreyms@django-server:~$ sudo nano /etc/ssh/sshd_config
  6. # PermitRootLogin yes -> no
  7. # PasswordAuthentication yes -> no
  9. coreyms@django-server:~$ sudo systemctl restart sshd
  • install ufw, and change ufw settings
  • (ufw - program for managing a netfilter firewall) ```bash coreyms@django-server:~$ sudo apt-get install ufw coreyms@django-server:~$ sudo ufw default allow outgoing Default outgoing policy changed to ‘allow’ (be sure to update your rules accordingly) coreyms@django-server:~$ sudo ufw default deny incoming Default incoming policy changed to ‘deny’ (be sure to update your rules accordingly) coreyms@django-server:~$ sudo ufw allow ssh Rules updated Rules updated (v6) coreyms@django-server:~$ sudo ufw allow 8000 Rules updated Rules updated (v6) coreyms@django-server:~$ sudo ufw enable Command may disrupt existing ssh connections. Proceed with operation (y|n)? y Firewall is active and enabled on system startup coreyms@django-server:~$ sudo ufw status Status: active

To Action From

22/tcp ALLOW Anywhere
8000 ALLOW Anywhere
22/tcp (v6) ALLOW Anywhere (v6)
8000 (v6) ALLOW Anywhere (v6) 

  2. <a name="xxOHQ"></a>
  3. ### May. 27
  4. (continue)
  6. - at first, create a virtual environment to pick the requirement to run our project
  7. - because I meet problem to use the virtual environment, so I might have too many lines for requirements.txt
  8. ```bash
  9. [root@localhost django_project]# pip freeze
  10. appdirs==1.4.4
  11. asgiref==3.2.7
  12. attrs==19.3.0
  13. awsebcli==3.18.1
  14. bcrypt==3.1.7
  15. blessed==1.17.5
  16. botocore==1.15.49
  17. cached-property==1.5.1
  18. cement==2.8.2
  19. certifi==2020.4.5.1
  20. cffi==1.14.0
  21. chardet==3.0.4
  22. colorama==0.4.3
  23. cryptography==2.9.2
  24. distlib==0.3.0
  25. Django==2.1.15
  26. django-crispy-forms==1.9.1
  27. docker==4.2.0
  28. docker-compose==1.25.5
  29. dockerpty==0.4.1
  30. docopt==0.6.2
  31. docutils==0.15.2
  32. filelock==3.0.12
  33. future==0.16.0
  34. idna==2.7
  35. importlib-metadata==1.6.0
  36. jmespath==0.10.0
  37. jsonschema==3.2.0
  38. paramiko==2.7.1
  39. pathspec==0.5.9
  40. Pillow==7.1.2
  41. pycparser==2.20
  42. PyNaCl==1.3.0
  43. pyrsistent==0.16.0
  44. python-dateutil==2.8.0
  45. pytz==2020.1
  46. PyYAML==5.3.1
  47. requests==2.20.1
  48. semantic-version==2.5.0
  49. six==1.11.0
  50. sqlparse==0.3.1
  51. termcolor==1.1.0
  52. texttable==1.6.2
  53. urllib3==1.24.3
  54. virtualenv==20.0.21
  55. wcwidth==0.1.9
  56. websocket-client==0.57.0
  57. zipp==3.1.0
  58. [root@localhost django_project]# pip freeze > requirements.txt
  • I manually left those lines:
    1. certifi==2020.4.5.1
    2. chardet==3.0.4
    3. Django==2.1.15
    4. django-crispy-forms==1.9.1
    5. idna==2.7
    6. Pillow==7.1.2
    7. pytz==2020.1
    8. requests==2.20.1
    9. urllib3==1.24.3

  • copy the source code of our project to the linux server:

    1. [root@localhost Python]# scp -r django_project coreyms@172.105.102.73:~/

    image.png

  • for the linux server, install some packages

  • and create “venv” into django_project/
  • change the virtual environment into “venv”
  • install required packages ```bash coreyms@django-server:~$ sudo apt-get install python3-pip coreyms@django-server:~$ sudo apt-get install python3-venv

coreyms@django-server:~$ python3 -m venv django_project/venv coreyms@django-server:~$ ls django_project/ blog django_project media profile_pics venv db.sqlite3 manage.py posts.json users

coreyms@django-server:~$ cd django_project/ coreyms@django-server:~/django_project$ source venv/bin/activate

(venv) coreyms@django-server:~/django_project$ pip install -r requirements.txt

  2. - modify setting.py:
  3. ```bash
  4. (venv) coreyms@django-server:~/django_project$ sudo nano django_project/settings.py 
  6. # ALLOWED_HOSTS = [] -> ['(ssh ip before)']
  7. # add STATIC_ROOT = os.path.join(BASE_DIR, 'static')
  9. (venv) coreyms@django-server:~/django_project$ python manage.py collectstatic
  10. 120 static files copied to '/home/coreyms/django_project/static'.
  • now we can runserver: ```bash (venv) coreyms@django-server:~/django_project$ python manage.py runserver 0.0.0.0:8000 Performing system checks…

System check identified no issues (0 silenced). May 27, 2020 - 20:46:20 Django version 2.1.15, using settings ‘django_project.settings’ Starting development server at http://0.0.0.0:8000/ Quit the server with CONTROL-C.

  1. 0.0.0.0 stands for ssh ip, so we access with my own ssh ip path: [http://172.105.102.73:8000/](http://172.105.102.73:8000/)<br />The deployment is successful, and I am able to use all functions. <br />![image.png](https://cdn.nlark.com/yuque/0/2020/png/1243266/1590698895107-6854eaed-f5aa-4145-9f10-a8b9e08b9c97.png#align=left&display=inline&height=401&margin=%5Bobject%20Object%5D&name=image.png&originHeight=802&originWidth=1554&size=111073&status=done&style=none&width=777)<br />new created user: <br />![image.png](https://cdn.nlark.com/yuque/0/2020/png/1243266/1590699026061-9bd90756-8d3c-4c1a-a746-0464fa583da0.png#align=left&display=inline&height=365&margin=%5Bobject%20Object%5D&name=image.png&originHeight=729&originWidth=1365&size=78523&status=done&style=none&width=682.5)
  3. <a name="OGhaB"></a>
  4. #### About reset-password:
  5. it's related to some more detailed use of new packages, so I halt this part for later. <br />[https://www.youtube.com/watch?v=Sa_kQheCnds&list=PL-osiE80TeTtoQCKZ03TU5fNfx2UY6U4p&index=13](https://www.youtube.com/watch?v=Sa_kQheCnds&list=PL-osiE80TeTtoQCKZ03TU5fNfx2UY6U4p&index=13)
  8. <a name="qzfEQ"></a>
  9. ### May. 28
  10. <a name="Be1By"></a>
  11. #### Using AWS S3 for File Uploads: 
  13. - For this part, we need an Amazon Web Services (AWS) account to apply AWS S3. 
  14. - S3 stands for "Simple Storage Service", it's web service that users can upload and save files into servers of AWS.
  16. - First, setup an AWS account.
  17. - Then get into the console page, input "S3" for the service we want:  
  19. ![image.png](https://cdn.nlark.com/yuque/0/2020/png/1243266/1590793514311-2763ccd3-f85c-44d8-9f9c-6541714bde2f.png#align=left&display=inline&height=407&margin=%5Bobject%20Object%5D&name=image.png&originHeight=814&originWidth=1547&size=120316&status=done&style=none&width=773.5)<br />![image.png](https://cdn.nlark.com/yuque/0/2020/png/1243266/1590794499164-266bbed4-fd8e-415d-821a-8833097eb4e5.png#align=left&display=inline&height=354&margin=%5Bobject%20Object%5D&name=image.png&originHeight=708&originWidth=1865&size=100622&status=done&style=none&width=932.5)
  21. - create a new bucket: 
  23. ![image.png](https://cdn.nlark.com/yuque/0/2020/png/1243266/1590794458871-344ef729-28c6-4830-a706-44144fd3c821.png#align=left&display=inline&height=359&margin=%5Bobject%20Object%5D&name=image.png&originHeight=717&originWidth=1101&size=50309&status=done&style=none&width=550.5)
  25. - get into the bucket just created, we select "Permissions" -> "CORS configuration"
  27. ![image.png](https://cdn.nlark.com/yuque/0/2020/png/1243266/1590794677014-7b534be1-a05b-40a1-9241-cf9a427bbfef.png#align=left&display=inline&height=356&margin=%5Bobject%20Object%5D&name=image.png&originHeight=711&originWidth=1421&size=58083&status=done&style=none&width=710.5)<br />copy this cors config text inside, and save it: 
  28. ```html
  29. <?xml version="1.0" encoding="UTF-8"?>
  30. <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
  31.    <CORSRule>
  32.         <AllowedOrigin>*</AllowedOrigin>
  33.         <AllowedMethod>GET</AllowedMethod>
  34.         <AllowedMethod>POST</AllowedMethod>
  35.         <AllowedMethod>PUT</AllowedMethod>
  36.         <AllowedHeader>*</AllowedHeader>
  37.     </CORSRule>
  38. </CORSConfiguration>
  • back to the console, switch to “IAM”:

image.png
add a new user:
image.png
grant S3 Full Access Policy:
image.png
after the new user is created, we are given a pair of access key id and secret access key:
image.png

  • edit ~/.bash_profile, add these lines:

    1. export AWS_ACCESS_KEY_ID="..." #string of the Access Key ID
    2. export AWS_SECRET_ACCESS_KEY="..." #string of the Secret Access Key
    3. export AWS_STORAGE_BUCKET_NAME="django-blogs-files"

  • install some packages:

    1. (django_env) [root@localhost Python]# pip install boto3
    2. (django_env) [root@localhost django_project]# pip install django-storages

  • update /django_project/settings.py: ```bash

    …

INSTALLED_APPS = [ ‘blog.apps.BlogConfig’, ‘users.apps.UsersConfig’, ‘crispy_forms’, ‘django.contrib.admin’, ‘django.contrib.auth’, ‘django.contrib.contenttypes’, ‘django.contrib.sessions’, ‘django.contrib.messages’, ‘django.contrib.staticfiles’, ‘storages’, # new ]

…

AWS_ACCESS_KEY_ID = os.environ.get(‘AWS_ACCESS_KEY_ID’) AWS_SECRET_ACCESS_KEY = os.environ.get(‘AWS_SECRET_ACCESS_KEY’) AWS_STORAGE_BUCKET_NAME = os.environ.get(‘AWS_STORAGE_BUCKET_NAME’)

AWS_S3_FILE_OVERWRITE = False AWS_DEFAULT_ACL = None

DEFAULT_FILE_STORAGE = ‘storages.backends.s3boto3.S3Boto3Storage’

AWS_S3_REGION_NAME = ‘us-east-2’ # my AWS region AWS_S3_SIGNATURE_VERSION = ‘s3v4

  2. - and because save method changes, don't need to define save method on our own, so change /users/models.py:
  3. ```python
  4. class Profile(models.Model):
  5.     user = models.OneToOneField(User, on_delete=models.CASCADE)
  6.     image = models.ImageField(default='default.jpg', upload_to='profile_pics')
  8.     def __str__(self):
  9.         return f'{self.user.username} Profile'
  11.     # def save(self, *args, **kawrgs):
  12.     #    super().save(*args, **kawrgs)
  14.     #    img = Image.open(self.image.path)
  16.     #    if img.height > 300 or img.width > 300:
  17.     #        output_size = (300, 300)
  18.     #        img.thumbnail(output_size)
  19.     #        img.save(self.image.path)
  • now get back to S3 page of AWS and enter the bucket at first:

image.png

  • upload stuff in /media to overview page:

image.png
and allow public access:
image.png
to test, runserver: 

  1. [root@localhost django_project]# source ~/django_env/bin/activate
  2. (django_env) [root@localhost django_project]# python manage.py runserver

this S3 modification is successful, we can pick images from the bucket before:
image.png

  • here we update an image for a user:

image.png
and then we can see the corresponding image is in the corresponding folder of the bucket:
image.png