Kami akan membantu Anda membuat website portofolio teknisi HP dengan Django, Bootstrap, dan virtual environment. Berikut langkah-langkahnya menggunakan komputer berbabasis Windows:
1. Membuat Virtual Environment:
- Buka Command Prompt
- Ketik perintah:
python -m venv teknisi_env
cd teknisi_env
Scripts\activate
2. Install Django:
pip install django
3. Membuat Proyek Django:
django-admin startproject portofolio
cd portofolio
python manage.py startapp website
4. Edit settings.py, tambahkan 'website' di INSTALLED_APPS:
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'website',
]
# Pengaturan untuk templates, tambahkan 'DIRS': [BASE_DIR / 'templates'], di bagian TEMPLATES :
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [BASE_DIR / 'templates'], # Tambahkan di sini
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
# Pengaturan untuk gambar
STATIC_URL = '/static/'
STATICFILES_DIRS = [ BASE_DIR / "static",]
MEDIA_URL = '/media/'
MEDIA_ROOT = BASE_DIR / 'media'
5. Buat folder untuk menyimpan template dan gambar:
mkdir templates
mkdir static
mkdir static/images
- Copy file image1.jpg, image2.jpg, dan image3.jpg ke folder static/images. Letakkan image favicon.io di folder static.
6. Buat base.html di folder templates:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>Teknisi HP Professional</title>
<link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="/">Teknisi HP Pro</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/">Beranda</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/tentang">Tentang Kami</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/hubungi">Hubungi Kami</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Content -->
{% block content %}
{% endblock %}
<!-- Footer -->
<footer class="bg-dark text-white text-center py-3 mt-5">
<p>Copyright © 2024 Teknisi HP Professional</p>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
7. Buat 3 template halaman di folder templates:
beranda.html:
{% extends 'base.html' %}
{% load static %}
{% block content %}
<div class="container text-center mt-5">
<h1>Selamat Datang di Layanan Teknisi HP Professional</h1>
<img src="{% static 'images/image1.jpg' %}" class="img-fluid mt-4" alt="Teknisi HP">
<p class="mt-4">Kami siap membantu memperbaiki HP Anda dengan profesional</p>
</div>
{% endblock %}
tentang.html:
{% extends 'base.html' %}
{% load static %}
{% block content %}
<div class="container text-center mt-5">
<h1>Tentang Kami</h1>
<img src="{% static 'images/image2.jpg' %}" class="img-fluid mt-4" alt="Tentang Kami">
<p class="mt-4">Kami adalah teknisi berpengalaman dengan keahlian memperbaiki berbagai merek HP</p>
</div>
{% endblock %}
hubungi.html:
{% extends 'base.html' %}
{% load static %}
{% block content %}
<div class="container text-center mt-5">
<h1>Hubungi Kami</h1>
<img src="{% static 'images/image3.jpg' %}" class="img-fluid mt-4" alt="Hubungi Kami">
<p class="mt-4">Telepon: 08123456789</p>
<p>Email: teknisi@email.com</p>
</div>
{% endblock %}
8. Edit website/views.py:
from django.shortcuts import render
def beranda(request):
return render(request, 'beranda.html')
def tentang(request):
return render(request, 'tentang.html')
def hubungi(request):
return render(request, 'hubungi.html')
9. Buat urls.py di folder website:
from django.urls import path
from . import views
urlpatterns = [
path('', views.beranda, name='beranda'),
path('tentang/', views.tentang, name='tentang'),
path('hubungi/', views.hubungi, name='hubungi'),
]
10. Edit portofolio/urls.py:
from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('website.urls')),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
11. Membuat file requirements.txt yang berisi daftar semua paket Python beserta versinya yang saat ini terinstal di lingkungan virtual yang aktif.
pip freeze > requirements.txt
12. Jalankan website:
python manage.py migrate
python manage.py runserver
Buka browser dan akses http://127.0.0.1:8000
Website Anda sudah siap dengan:
- Navbar dengan 3 menu
- Footer di setiap halaman
- 3 halaman berbeda (Beranda, Tentang, Hubungi)
- Gambar di tengah setiap halaman
- Desain responsive dengan Bootstrap
Pastikan gambar yang Anda gunakan (image1.jpg, image2.jpg, image3.jpg) sudah ada di folder static/images.
