PYTHON TWINS FLASK DJANGO PROJECT

✅ Rencana “Twin Project” Flask vs Django Goal Buat 2 project web sederhana dengan fitur yang sama, pakai Flask dan Django Output Kamu bisa langsung rasain perbedaan struktur, flow, routing, dan style coding 📁 Struktur Twin Project coding-experiment/ ├── flask_project/ │ ├── app.py │ ├── templates/ │ │ ├── base.html │ │ ├── index.html │ │ └── about.html │ └── static/ │ └── style.css └── django_project/ ├── manage.py ├── project/ │ ├── settings.py │ └── urls.py └── home/ ├── views.py ├── urls.py ├── templates/home/ │ ├── base.html │ ├── index.html │ └── about.html └── static/home/ └── style.css 🧠 Manfaat Langsung Topik Flask Django Routing @app.route('/') urls.py + views.py Templating Jinja2 Jinja2 (Django version) Static files url_for('static', ...) {% static '...' %} Struktur file Bebas (manual) Terstruktur keras (wajib taat) Loading CSS/JS Manual Otomatis via {% load static %} App logic separation Opsional Modular wajib (multi-app ready) 📦 Struktur Folder Awal coding-experiment/ ├── flask_project/ │ ├── app.py │ ├── templates/ │ │ ├── base.html │ │ ├── index.html │ │ └── about.html │ └── static/ │ └── style.css └── django_project/ ├── manage.py ├── project/ │ ├── settings.py │ └── urls.py └── home/ ├── views.py ├── urls.py ├── templates/home/ │ ├── base.html │ ├── index.html │ └── about.html └── static/home/ └── style.css 🎯 Target: Akses / dan /about, layout pakai base.html, styling dari style.css 🧱 Step-by-Step Setup Django Project 🧩 1. Inisialisasi Project & App bash Salin Edit django-admin startproject project django_project cd django_project python manage.py startapp home 🧩 2. Registrasi App home di settings.py python Salin Edit # project/settings.py INSTALLED_APPS = [ ... 'home', ] 🧩 3. Buat Struktur Templating & Static bash Salin Edit mkdir -p home/templates/home mkdir -p home/static/home touch home/templates/home/base.html touch home/templates/home/index.html touch home/templates/home/about.html touch home/static/home/style.css 🧩 4. views.py — bikin 2 view python Salin Edit # home/views.py from django.shortcuts import render def index(request): return render(request, 'home/index.html') def about(request): return render(request, 'home/about.html') 🧩 5. home/urls.py — routing internal app python Salin Edit # home/urls.py from django.urls import path from . import views urlpatterns = [ path('', views.index, name='index'), path('about/', views.about, name='about'), ] 🧩 6. project/urls.py — include ke global route python Salin Edit # project/urls.py from django.contrib import admin from django.urls import path, include urlpatterns = [ path('admin/', admin.site.urls), path('', include('home.urls')), ] 🧩 7. Template HTML — base.html html Salin Edit {% load static %}

Wiki AI

• Home
• About

{% block content %}{% endblock %}

🧩 8. index.html & about.html (pakai extend) html Salin Edit {% extends 'home/base.html' %} {% block title %}Home{% endblock %} {% block content %}

Welcome to the Django Landing Page!

This is the home page using Materialize.

{% endblock %} html Salin Edit {% extends 'home/base.html' %} {% block title %}About{% endblock %} {% block content %}

About This Site

This page was built using Django with MaterializeCSS.

{% endblock %} 🧩 9. Tambahkan STATICFILES_DIRS (jika pakai style.css) python Salin Edit # project/settings.py STATICFILES_DIRS = [ BASE_DIR / 'home' / 'static', ] 🧪 Sekarang jalankan: bash Salin Edit python manage.py runserver Cek: http://localhost:8000/ ✅ http://localhost:8000/about ✅