AM/FM week 2

!amfm-week-2.md

AM/FM Week 2

Outline

• Pengenalan git
  • Install git
  • Command-command di CMD
  • Command-command di git
• Pengenalan django
  • Install django
  • cara kerja django
  • cara menggunakan django

Pengenalan dengan Git

git adalah version control system yang digunakan para developer untuk mengembangkan software secara bersama-bersama. Fungsi utama git yaitu mengatur versi dari source code program anda dengan mengasih tanda baris dan code mana yang ditambah atau diganti.

Website: https://git-scm.com/

Apa itu repository?
Apa itu remote?
Apa itu gitlab / github? Apa perbedaannya?

Install git

• Download
  • Windows 64-bit
  • Linux (Ubuntu): sudo apt install git
• jalankan installer-nya

Command-Command di CMD

• cd (change directory) : pindah ke luar atau ke dalam suatu folder
• dir (directory?) : menampilkan list isi folder di posisi sekarang.
• mkdir <folder_name> (make directory) : membuat folder baru
• del <file_name> (delete) : menghapus sebuah file
• rmdir <folder_name> (remove directory) : menghapus sebuah folder

Git Commands

Command-command git bisa dijalankan lewat git bash (yang baru saja diinstall) atau command prompt (cmd).

git init

Untuk membuat repository pada file lokal yang nantinya ada folder .git

• Buat folder baru, misalkan nama foldernya gabut

  mkdir gituan
  

• Lalu masuk ke foldernya

  cd gituan
  

• Buat repository git baru

  git init
  

git config

Mengatur setting di git

• Masukkan nama

  git config --global user.name "Nama Lengkap Kamu"
  

• Masukkan email

  git config --global user.email "email.kamu@yang.dipake"
  

• Dapat dcek dengan menulis:

  git config -l
  

  Apakah user.name dan user.email ada disitu?

git status

Untuk mengetahui status dari repository lokal

• Coba cek status

  git status
  

• Masukkan sebuah file di dalam folder tersebut
• Cek status lagi

  git status
  

• Seharusnya ada file berwarna merah. Artinya ada file berbeda dari keadaan awal.

git add <nama_file>

Menambahkan file baru pada repository yang dipilih.

• Tambahkan file yang berubah untuk dicatat git satu per satu

  git add <nama_file>
  

  atau tambahkan semua file yang berubah

  git add .
  

• Coba sekarang cek status

  git status
  

• Seharusnya file-filenya sekarang berwarna hijau. Artinya file sudah di ditandai oleh git.
• File-file yang belum di add, disebut not staged for commit.
• Sedangkan, file-file yang sudah di add, disebut staged for commit.

git commit

Untuk menyimpan perubahan yang dilakukan. Seperti mengambil screenshot dari file-file yang saat commit.

• Cek apakah sudah ada file yang staged

  git status
  

• Buat commit baru. Harus memassukan pesan apa yang dicommit (-m)

  git commit -m "pesan yang sabeb"
  

  atau message dapat ditulis di text editor

  git commit
  

  kalau yang terbuka adalah vim,
  • pndahhkan kursor dengan arrow key
  • tombol i untuk menulis
  • selesai menulis tekan esc
  • seletah esc, tekan :wq dan ENTER untuk keluar

git log

Untuk melihat commit-commit yang pernah dilakukan

• Melihat log

  git log
  

• Jika lognya panjang sampai bawah, tekan q untuk keluar.

Beberapa Command Lainnya

• git branch <nama_branch> : memuat branch baru di repository
• git branch : melihat seluruh branch yang ada pada repository
• git checkout : menukar branch yang aktif dengan branchyang dipilih
• git merge : untuk menggabungkan branch yang aktif dan branch yang dipilih
• git push : untuk mengirimkan perubahan file setelah di commit ke remote repository.
• git clone : membuat Salinan repository lokal

Bahan Belajar

• https://learngitbranching.js.org/

Pengenalan dengan Django

Project Django Pertama

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

  mkdir amfm
  cd amfm
  

• 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, seperti django. Disini akan menginstall django.

  pip install django
  

• Setelah selesai menginstall, kamu akan mencetak 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
  

• Lalu kamu bisa memulai untuk membuat project django (memakai nama yang sama, yaitu amfm)

  django-admin startproject amfm .
  

  hasilnya akan ada file-file seperti ini:

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

• Mulai dari sekarang, kamu 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 tadi belum):

  git config --global user.name "Nama Lengkap Kamu"
  git config --global user.email "email.kamu@yang.dipake"
  

• 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).
  Buka dan tekan CTRL-S di link .gitignore ini untuk mendownload filenya. Kemudian dimasukkan ke folder paling luar. Seperti ini:

  ├── env
  │   ├── ...
  │   └── ...
  ├── .gitignore
  ├── manage.py
  └── amfm
      ├── __init__.py
      ├── **pycache**
      ├── settings.py
      ├── urls.py
      └── wsgi.py
  

• simpan sebagai commit baru.

  git add .
  git commit -m "text commit sabeb"
  

• Buat akun Gitlab (Kalau belum punya)
• Buatlah project baru di gitlab. Pastikan projectnya diset agar Public.
• Kemudian klik tombol clone untuk mendapatkan link gitlab yang https.
• Lalu masukkan tulis di terminal link tersebut seperti ini:

  git remote add origin https://gitlab.com/username_kamu/amfm.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 .

Aplikasi Django Pertama

• Di django, satu project website dapat memiliki banyak app. Kamu akan membuat app pertama kamu, 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
  └── amfm
      ├── __init__.py
      ├── settings.py
      ├── urls.py
      └── wsgi.py
  

• Buka file amfm/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 tugas pertemuan 1 ke folder homepage/templates/. setelah memasukan file-file html ke folder templates, akan terlihat seperti ini:

  ├── homepage
  │   ├── __init__.py
  │   ├── admin.py
  │   ├── apps.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 ('')
• Kemudian membuat mengubah file amfm/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 amfm/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.

Bahan Belajar

• https://docs.djangoproject.com/en/2.2/intro/tutorial01/

.gitignore

# Created by https://www.gitignore.io/api/django
# Edit at https://www.gitignore.io/?templates=django
# modified by okto

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

# If your build process includes running collectstatic, then you probably don't need or want to include staticfiles/
# in your Git repository. Update and uncomment the following line accordingly.
amfm/staticfiles/
staticfiles/

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

# C extensions
*.so

# 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

# Installer logs
pip-log.txt
pip-delete-this-directory.txt

# Unit test / coverage reports
htmlcov/
.tox/
.nox/
.coverage
.coverage.*
.cache
nosetests.xml
coverage.xml
*.cover
.hypothesis/
.pytest_cache/

# Translations
*.mo

# Scrapy stuff:
.scrapy

# Sphinx documentation
docs/_build/

# PyBuilder
target/

# pyenv
.python-version

# celery beat schedule file
celerybeat-schedule

# SageMath parsed files
*.sage.py

# Spyder project settings
.spyderproject
.spyproject

# Rope project settings
.ropeproject

# Mr Developer
.mr.developer.cfg
.project
.pydevproject

# mkdocs documentation
/site

# mypy
.mypy_cache/
.dmypy.json
dmypy.json

# Pyre type checker
.pyre/

# End of https://www.gitignore.io/api/django

# virtual environment
env/