Setup Awal project django

!TUTORIEL.md

Membuat Website dengan Django

Dibuat oleh M. Oktoluqman F.
Melanjutkan Story 3

Your First Project

• Buat folder project (misalkan diberi nama story). Akan muncul folder kosong bernama story. Lalu masuk ke folder baru tersebut.

  mkdir story
  cd story
  

• Kemudian membuat virtual environment (biasanya env). Akan muncul folder baru bernama env.

  python -m venv env
  

• Lalu masuk ke environment yang baru saja dibuat.

  env\Scripts\activate.bat
  

  Perlu diperhatikan menggunakan backslash (\ yang di atas ENTER), bukan slash (/).

• Setelah itu install package-package python yang dibutuhkan dengan pip, misalnya django. Disini akan menginstall django dan whitenoise. Whitenoise digunakan untuk mengatur gambar-gambar dan file css di django.

  pip install django whitenoise
  

  Untuk mengecek kedua hal tersebut sudah terinstall, jalankan:

  pip freeze
  

  Pasti akan ada banyak package lain yang ikut terinstall karena dependensi antar program. Minimal django dan whitenoise ada disana.

• Setelah selesai menginstall, kita akan memasukkan apa saja yang diinstall ke file bernama requirements.txt. Caranya dengan menggunakan pip freeze. Akan muncul file baru bernama requirements.txt.

  pip freeze > requirements.txt
  

  Kamu bisa cek apakah isi file requirements.txt sama dengan saat menjalankan pip freeze yang tadi.
• Lalu kita bisa memulai untuk membuat project django. (saya akan memakai nama yang sama, yaitu story)

  django-admin startproject story .
  

  Jangan lupa . di akhir

  hasilnya akan ada file-file seperti ini:

  ├── env
  │   ├── Scripts
  │   │   ├── activate.bat
  │   │   ├── ...
  │   │   └── ...
  │   ├── ...
  │   └── ...
  ├── manage.py
  ├── requirements.txt
  └── story
      ├── __init__.py
      ├── settings.py
      ├── urls.py
      └── wsgi.py
  

• Mulai dari sekarang, kita dapat menjalankan server django.

  python manage.py runserver
  

  Server dapat dibuka di browser (misalkan Firefox) dengan memasukkan url localhost:8000 atau 127.0.0.1:8000. Cara menghentikan servernya dengan menekan CTRL + C.
  Ingat command ini, karena akan sering digunakan.

Setup Git

• Inisialisasi repository git

  git init
  

• Membuat config user (kalau belum pernah):

  git config user.name "Nama Lengkapmu"
  git config user.email "emailmu-buat-gitlab@emailnya.com"
  

• Membuat file .gitignore, yang berfungsi menyembunyikan file-file yang tidak diperlukan agar tidak disimpan di git. Iya, file .gitignore tidak memiliki extension seperti (.txt atau .exe).
  Buatlah file baru bernama .gitignore yang berisi seperti yang ada di bawah. Ditaruh di folder paling luar. Seperti ini:

  ├── env
  │   ├── ...
  │   └── ...
  ├── .gitignore
  ├── manage.py
  └── story
      ├── __init__.py
      ├── __pycache__
      ├── settings.py
      ├── urls.py
      └── wsgi.py
  

• simpan sebagai commit baru.

  git add .
  git commit -m "tambahin gitignore, atau commitan sabeb"
  

• Buatlah project baru di gitlab (jika belum punya). Pastikan projectnya diset agar Public.
• Kemudian copy link repository dari gitlab, kemudian tambahkan .git di akhir (misalkan menjadi https://gitlab.com/your_username/link_repo.git), atau tekan tombol clone yang berwarna biru untuk mencopy linknya.
• Lalu masukkan tulis di terminal link tersebut seperti ini:

  git remote add origin https://gitlab.com/your_username/link_repo.git
  

• Lalu coba untuk push ke gitlab.

  git push -u origin master
  

  Dia akan meminta username dan password di gitlab. Passwordnya tersembunyi, jadi coba saja diketik. Jika berhasil, kamu bisa liat project django kamu di https://gitlab.com .

Your First App

• Di django, satu project website dapat memiliki banyak app. Kita akan membuat app pertama kita, misalkan diberi nama homepage.

  python manage.py startapp homepage
  

  Akan ada folder bernama homepage isinya seperti ini:

  ├── env
  ├── homepage
  │   ├── admin.py
  │   ├── apps.py
  │   ├── __init__.py
  │   ├── migrations
  │   ├── models.py
  │   ├── tests.py
  │   └── views.py
  ├── manage.py
  └── story
      ├── __init__.py
      ├── settings.py
      ├── urls.py
      └── wsgi.py
  

• Buka file story/settings.py, kemudian tambahkan nama app kamu ke installed apps, jadi seperti ini:

  INSTALLED_APPS = [
      'django.contrib.admin',
      'django.contrib.auth',
      'django.contrib.contenttypes',
      'django.contrib.sessions',
      'django.contrib.messages',
      'django.contrib.staticfiles',
      'homepage',
  ]

• Buatlah folder baru bernama templates di folder homepage.

  mkdir homepage\templates
  

• kemudian masukkan file-file html yang kamu buat dari story 3 ke folder homepage/templates/. setelah memasukan file-file html ke folder templates, akan terlihat seperti ini:

  ├── homepage
  │   ├── admin.py
  │   ├── apps.py
  │   ├── __init__.py
  │   ├── migrations
  │   ├── models.py
  │   ├── tests.py
  │   ├── templates
  │   │   ├── index.html
  │   │   ├── profile.html
  │   │   ├── ... .html
  │   │   └── ... .html
  │   └── views.py
  

  nama file html tidak harus persis sama.

• buka file homepage/views.py kemudian buat fungsi baru di dalamnya, misal diberi nama index(request) . Ganti nama_file.html menjadi file sebenarnya. Formatnya seperti ini:

  def index(request):
      return render(request, 'nama_file.html')

  Jika punya lebih dari satu html, buatlah isi homepage/views.py menjadi seperti ini:

  from django.shortcuts import render
  
  # Create your views here.
  def index(request):
      return render(request, 'index.html')
  
  def profile(request):
      return render(request, 'profile.html')
  
  # diteruskan...

  Nama fungsinya bebas, tapi perlu diingat nama-namanya.

• Lalu kamu akan mengatur routing url. caranya adalah dengan membuat file baru homepage/urls.py. isinya seperti ini:

  from django.urls import path
  from . import views
  
  app_name = 'homepage'
  
  urlpatterns = [
      path('', views.index, name='index'),
      path('profile/', views.profile, name='profile'),
      # dilanjutkan ...
  ]

  Format penulisan pathnya adalah path('url-yang-diinginkan/', views.nama_fungsi, name='nama_fungsi'),. Pastikan ada satu url yang string kosong saja ('') Url tersebut akan dijadikan landing page website kamu.
• Kemudian membuat mengubah file story/urls.py kamu akan mengimport include dan menambahkan urlpatterns baru:

  from django.urls import path, include
  from django.contrib import admin
  
  urlpatterns = [
      path('admin/', admin.site.urls),
      path('', include('homepage.urls')),
  ]

  Karena dia meng-include 'homepage.urls' Django akan mencari file homepage/urls.py.
• Sekarang coba dijalankan server djangonya.

  python manage.py runserver
  

  Server dapat dibuka di browser dengan memasukkan url localhost:8000. Apakah bisa berjalan?
  Apakah styling atau gambar sudah muncul? Sepertinya belum, tapi tidak apa-apa, karena memang belum selesai Wkwkwk.
• Sekarang kamu akan memasukkan semua stylesheet (*.css) dan semua gambar (*.jpg, *.png, *.svg, dst.) ke project Django kamu. Kamu buat folder baru homepage/static/

  mkdir homepage\static\
  

• File-file stylesheet dan gambar kamu masukkan ke folder homepage/static/. Sehingga struktur filenya kira-kira seperti ini:

  ├── homepage
  │   ├── ...
  │   ├── ...
  │   ├── static
  │   │   ├── style.css
  │   │   ├── ... .css
  │   │   ├── photo.jpg
  │   │   ├── ... .png
  │   │   └── ... .svg
  │   ├── ...
  │   └── ...
  

• Lalu kamu harus membuka semua file html yang menggunakan css dan gambar untuk menyesuaikan dengan penulisan Django. Format dari django menggunakan static, jadi harus menambahkan {% load static %} di semua file yang menggunakan resource dari folder static/ pada bagian paling atas. Contohnya seperti ini:

  <!DOCTYPE html>
  {% load static %}
  <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      ...
    </head>
    ...
  </html>

• Ubah semua baris html yang menggunakan css atau gambar:
  • CSS:
    Awalnya:

    <link rel="stylesheet" href="nama_file.css">

    menjadi:

    <link rel="stylesheet" href="{% static 'nama_file.css' %}">

  • Gambar:
    Awalnya:

    <img src="nama_gambar.jpg">

    menjadi:

    <img src="{% static 'nama_gambar.jpg' %}">

  Kalau menggunakan inline style, nggak perlu diapa-apain.

• Url-url juga perlu diubah.
  Awalnya:

  <a href="index.html">...</a>
  <a href="profile.html">...</a>

  menjadi:

  <a href="{% url 'homepage:index' %}">...</a>
  <a href="{% url 'homepage:profile' %}">...</a>

  homepage adalah app_name dari homepage/urls.py, sedangkan index dan profil adalah name dari path-path yang ada di urlpatterns.

• Kalau kamu mencantumkan memasukkan gambar di file.css, misalkan
  Awalnya:

  background-image: url('gambar_background.jpg');

  Kamu harus menambahkan /static/ menjadi:

  background-image: url('/static/gambar_background.jpg');

  Django secara default memasukkan file-file static ke path url /static/. Bergantung pada variable STATIC_ROOT di story/settings.py.
• Jalankan server django, dan buka url localhost:8000 di browser.

  python manage.py runserver

  Apakah sekarang styling atau gambar sudah muncul? Seharusnya sudah.
• Jangan lupa git commit setelah website berjalan.

Deploy to Heroku

• (Bagi yang belum punya) Buat akun di Heroku, New > Create New App.
• Install beberapa package yang dibutuhkan heroku, atau nanti akan dibutuhkan.

  pip install dj-database-url gunicorn psycopg2-binary coverage selenium
  

  dan ditulis ulang ke file requirements.txt:

  pip freeze > requirements.txt
  

• tambahkan import baru di settings.py di bawah baris import os.

  import os
  import dj_database_url
  # ...

• Agar dapat di deploy, static harus dikumpulkan oleh whitenoise, jadi kita harus menambahkan whitenoise.middleware.WhiteNoiseMiddleware di story/settings.py bagian MIDDLEWARE.

  MIDDLEWARE = [
      'django.middleware.security.SecurityMiddleware',
      'whitenoise.middleware.WhiteNoiseMiddleware',
      'django.contrib.sessions.middleware.SessionMiddleware',
      'django.middleware.common.CommonMiddleware',
      # ...
  ]

• Ubah ALLOWED_HOSTS di story/settings.py.
  Awalnya:

  ALLOWED_HOSTS = []

  menjadi:

  ALLOWED_HOSTS = ['*']

• Tambahkan STATIC_ROOT di baris paling bawah story/settings.py.
  Awalnya:

  STATIC_URL = '/static/'

  menjadi:

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

• Tambahkan kode ini di story/settings.py setelah DATABASES.
  Awalnya:

  DATABASES = {
      'default': {
          'ENGINE': 'django.db.backends.sqlite3',
          'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
      }
  }

  menjadi:

  DATABASES = {
      'default': {
          'ENGINE': 'django.db.backends.sqlite3',
          'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
      }
  }
  
  PRODUCTION = os.environ.get('DATABASE_URL') is not None
  if PRODUCTION:
      # KALAU SUDAH BERJALAN, kamu bisa uncomment bagian DEBUG, ALLOWED_HOSTS, dan DATABASES.
      # For increased security.
      #DEBUG = False
      #ALLOWED_HOSTS = ['localhost', '127.0.0.1', 'NAMA_APP.herokuapp.com']
      #DATABASES['default'] = dj_database_url.config()
      SECURE_SSL_REDIRECT = True

• Masukkan file .gitlab-ci.yml dan Procfile ke dalam root project kita. sehingga seperti ini:

  ├── env
  │   ├── ...
  │   └── ...
  ├── .gitignore
  ├── .gitlab-ci.yml
  ├── homepage
  │   ├── ...
  │   └── ...
  ├── manage.py
  ├── requirements.txt
  ├── Procfile
  └── story
      ├── __init__.py
      ├── __pycache__
      ├── settings.py
      ├── urls.py
      └── wsgi.py
  

  Catatan: isi Procfile tergantung nama project, karena project Django ini bernama story, maka ditulis story.wsgi. Kalau nama project berbeda, ditulis nama_project.wsgi.

• Buka Repo Gitlab > Settings > CI/CD > Variables. Tambahkan 3 variabel:
  Key - Variable:
  1. HEROKU_APIKEY - (cek account settings di Heroku buat dapetin API key)
  2. HEROKU_APPNAME - NAMA-APP
  3. HEROKU_APP_HOST - NAMA-APP.herokuapp.com
• Lalu push ke gitlab.

  git add .
  git commit -m "deployment setting, atau pesannya sabeb"
  git push
  

• Tunggu beberapa saat. Jika berhasil, maka website dapat langsung dibuka lewat di NAMA_APP.herokuapp.com. Buka Gitlab untuk melihat proses-nya berlangsung.
• SELESAI YAAAY

Kalau ada pertanyaan, bisa tanya disini atau PC Okto

Kalau ada error saat menjalankan command-command diatas, tolong kasih tahu Okto. Agar yang lain tidak menemukan error yang sama. Selamat mengerjakan!!! :)

.gitignore

# Byte-compiled / optimized / DLL files
*.py[cod]
*$py.class

# Distribution / packaging
.Python
build/
develop-eggs/
dist/
downloads/
eggs/
.eggs/
lib/
lib64/
parts/
sdist/
var/
wheels/
pip-wheel-metadata/
share/python-wheels/
*.egg-info/
.installed.cfg
*.egg
MANIFEST

# django
*.log
*.pot
*.pyc
__pycache__/
local_settings.py
db.sqlite3
db.sqlite3-journal

# Translations
*.mo

# C extensions
*.so

# Spyder project settings
.spyderproject
.spyproject

# ignore coverage report
htmlcov/
.tox/
.nox/
.coverage
.coverage.*
.cache
nosetests.xml
coverage.xml
*.cover
.hypothesis/
.pytest_cache/

# ignore staticfiles for whitenoise
staticfiles/

# ignore virtual environment
env/

.gitlab-ci.yml

stages:
  - deploy

Deployment:
  image: ruby:2.4
  stage: deploy
  before_script:
    - gem install dpl
    - wget -qO- https://cli-assets.heroku.com/install-ubuntu.sh | sh
  script:
    - dpl --provider=heroku --app=$HEROKU_APPNAME --api-key=$HEROKU_APIKEY
    - export HEROKU_API_KEY=$HEROKU_APIKEY
  environment:
    name: production
    url: $HEROKU_APP_HOST
  only:
    - master

mistakes.md

Common Mistakes

Saat belum deploy berhasil tetapi tidak bisa dibuka di heroku (Server Error, etc.), Sebaiknya meng-comment bagian DEBUG = False, menjadi:

PRODUCTION = os.environ.get('DATABASE_URL') != None
if PRODUCTION:
    # DEBUG = False
    SECURE_SSL_REDIRECT = True

Tujuannya agar error mudah dipahami. Setelah deployment berhasil, Sangat Disarankan untuk uncomment kembali bagian tersebut, demi alasan keamanan.

Server local berjalan, tetapi CSS dan Gambar tidak muncul:

Kemungkinan kesalahan:

• Penulisan nama file. Penulisan huruf kapital perlu diperhatikan, terutama bagi yang menggunakan Operating System Windows. Di Windows penulisan nama file tidak memperhatikan huruf kapital (profil.css dan Profil.css dianggap sama), sedangkan di Linux (server Heroku) dan MacOS memperhatikan huruf kapital. Oleh karena itu server bisa error.

• Dan lain-lain

Server Local berjalan, tetapi di Heroku belum.

Kemungkinan Kesalahan:

• Salah ALLOWED_HOSTS. Pastikan nama NAMA-APP.herokuapp.com tidak typo.
• Procfile salah. Procfile tidak mempunyai file extension (seperti .txt). isi Procfile bagian wsgi adalah folder_project yang berisi file wsgi.py. Pastikan nama foldernya benar. Misal:

  ├── env
  │   ├── ...
  │   └── ...
  ├── ...
  ├── ...
  ├── .gitlab-ci.yml
  ├── Procfile
  └── ini_adalah_foldernya
     ├── __init__.py
     ├── __pycache__
     ├── settings.py
     ├── urls.py
     └── wsgi.py
  

  maka di procfile ditulis

  web: gunicorn ini_adalah_foldernya.wsgi --log-file -
  

• Dan lain-lain

Kalau masih ada, nanti ditambahkan.

Procfile

release: python manage.py migrate
web: gunicorn story.wsgi --log-file -

Mau nanya, kok kak okto jago??

Kok ada manage.py di directory story? Seharusnya kan di dalam story/story. Jadi di folder yang mana untuk dijadikan repository?

Kok ada manage.py di directory story? Seharusnya kan di dalam story/story. Jadi di folder yang mana untuk dijadikan repository?

Disini ada 2 directory yang namanya "story":

1. directory "story" yang isinya settings.py
2. directory "story" yang isinya manage.py dan directory "story" (case 1 diatas).

└── story/ (case 2)
    ├── manage.py
    ├── ...
    └── story/ (case 1)
        ├── settings.py
        └── ...

Yang menjadi repository git ini adalah yang case 2.

update dong bang, sekalian masukin tutorial cara hostingnya🙏

Heroku tapi gak gratis lagi kan? @WannProject mau hosting kemana?