Neler yeni
Kralforum.net

Alışveriş Sitesi Kodlama

📢 KralForum’a Hoş Geldiniz!

Sadece üyelere özel içeriklere erişmek ve topluluğumuzun bir parçası olmak için şimdi ücretsiz üye ol. 👉 Hemen aramıza katıl, sohbetlere dahil ol ve ayrıcalıkları keşfet!

Kayıt ol Giriş yap
Charizma

Charizma

KFN Forum Sahibi
Katılım
10 Ağustos 2025
Mesajlar
1,686
Tepkime puanı
502
Puanları
200
Konum
BURSA
Burcum
♑ Oğlak
Konu Sahibi
Size bu yapıyı anlatan, temel özelliklere sahip basit bir alışveriş sitesi prototipi kodlayacağım. Bu prototip, ürünleri listeleyen bir ana sayfadan oluşacak.

Bu örnek için şu teknolojileri kullanacağız:

  • Backend: Python dili ve Flask web framework'ü (basit ve hızlı olduğu için).
  • Frontend: HTML (sayfa iskeleti), CSS (görünüm) ve biraz JavaScript (etkileşim).

Adım 1: Proje Ortamını Hazırlama​

Öncelikle bilgisayarınızda Python'un kurulu olduğundan emin olun. Ardından terminal veya komut istemcisini açıp Flask kütüphanesini kurun:
Bash: 
pip install Flask

Şimdi projemiz için klasör yapısını oluşturalım:
Kod: 
e-ticaret-sitesi/
├── static/
│   ├── css/
│   │   └── style.css
│   └── js/
│       └── script.js
├── templates/
│   └── index.html
└── app.py

  • Kod: 
    app.py
    : Ana sunucu kodumuz burada olacak.
  • Kod: 
    templates/index.html
    : Ana sayfamızın HTML kodu.
  • Kod: 
    static/
    : CSS ve JavaScript gibi sabit dosyalarımızın bulunduğu klasör.

Adım 2: Backend Kodunu Yazma (
Kod: 
app.py
)​

Bu dosya, web sitemizin beyni olacak. Bir web sunucusu oluşturacak, ana sayfa isteğini karşılayacak ve HTML şablonuna ürün bilgilerini gönderecek.

Kod: 
app.py
dosyasının içeriği:

Python: 
from flask import Flask, render_template


# Flask uygulamasını başlat
app = Flask(__name__)


# Örnek ürün verileri (Normalde bu veriler veritabanından gelir)
products = [
    {
        "id": 1,
        "name": "Kablosuz Kulaklık",
        "price": 1250.00,
        "image": "https://via.placeholder.com/300x300.png?text=Kulakl%C4%B1k"
    },
    {
        "id": 2,
        "name": "Mekanik Klavye",
        "price": 1800.50,
        "image": "https://via.placeholder.com/300x300.png?text=Klavye"
    },
    {
        "id": 3,
        "name": "Oyuncu Faresi",
        "price": 875.00,
        "image": "https://via.placeholder.com/300x300.png?text=Fare"
    },
    {
        "id": 4,
        "name": "4K Monitör",
        "price": 7500.75,
        "image": "https://via.placeholder.com/300x300.png?text=Monit%C3%B6r"
    },
    {
        "id": 5,
        "name": "Webcam",
        "price": 950.00,
        "image": "https://via.placeholder.com/300x300.png?text=Webcam"
    },
    {
        "id": 6,
        "name": "Mikrofon",
        "price": 2100.00,
        "image": "https://via.placeholder.com/300x300.png?text=Mikrofon"
    }
]


# Ana sayfa route'u (URL'si)
@app.route('/')
def home():
    # index.html şablonunu render et ve ürün listesini şablona gönder
    return render_template('index.html', products=products)


# Uygulamayı çalıştır
if __name__ == '__main__':
    app.run(debug=True)

Harika bir fikir! Tam teşekküllü bir alışveriş sitesi kodlamak oldukça kapsamlı bir projedir. Genellikle bir Frontend (kullanıcının gördüğü arayüz), bir Backend (sunucu, veritabanı ve iş mantığı) ve bir Veritabanı (ürünler, kullanıcılar, siparişler) olmak üzere üç ana bölümden oluşur.

Size bu yapıyı anlatan, temel özelliklere sahip basit bir alışveriş sitesi prototipi kodlayacağım. Bu prototip, ürünleri listeleyen bir ana sayfadan oluşacak.

Bu örnek için şu teknolojileri kullanacağız:

  • Backend: Python dili ve Flask web framework'ü (basit ve hızlı olduğu için).
  • Frontend: HTML (sayfa iskeleti), CSS (görünüm) ve biraz JavaScript (etkileşim).


Adım 1: Proje Ortamını Hazırlama​



Öncelikle bilgisayarınızda Python'un kurulu olduğundan emin olun. Ardından terminal veya komut istemcisini açıp Flask kütüphanesini kurun:

Bash: 
pip install Flask

Şimdi projemiz için klasör yapısını oluşturalım:

Rich (BB code): 
e-ticaret-sitesi/
├── static/
│   ├── css/
│   │   └── style.css
│   └── js/
│       └── script.js
├── templates/
│   └── index.html
└── app.py

  • app.py: Ana sunucu kodumuz burada olacak.
  • templates/index.html: Ana sayfamızın HTML kodu.
  • static/: CSS ve JavaScript gibi sabit dosyalarımızın bulunduğu klasör.

Adım 2: Backend Kodunu Yazma (app.py)​

Bu dosya, web sitemizin beyni olacak. Bir web sunucusu oluşturacak, ana sayfa isteğini karşılayacak ve HTML şablonuna ürün bilgilerini gönderecek.

app.py dosyasının içeriği:


Python: 
from flask import Flask, render_template

# Flask uygulamasını başlat
app = Flask(__name__)

# Örnek ürün verileri (Normalde bu veriler veritabanından gelir)
products = [
    {
"id": 1,
"name": "Kablosuz Kulaklık",
"price": 1250.00,
"image": "https://via.placeholder.com/300x300.png?text=Kulaklık"
    },
    {
"id": 2,
"name": "Mekanik Klavye",
"price": 1800.50,
"image": "https://via.placeholder.com/300x300.png?text=Klavye"
    },
    {
"id": 3,
"name": "Oyuncu Faresi",
"price": 875.00,
"image": "https://via.placeholder.com/300x300.png?text=Fare"
    },
    {
"id": 4,
"name": "4K Monitör",
"price": 7500.75,
"image": "https://via.placeholder.com/300x300.png?text=Monitör"
    },
    {
"id": 5,
"name": "Webcam",
"price": 950.00,
"image": "https://via.placeholder.com/300x300.png?text=Webcam"
    },
    {
"id": 6,
"name": "Mikrofon",
"price": 2100.00,
"image": "https://via.placeholder.com/300x300.png?text=Mikrofon"
    }
]

# Ana sayfa route'u (URL'si)
@app.route('/')
def home():
# index.html şablonunu render et ve ürün listesini şablona gönder
return render_template('index.html', products=products)

# Uygulamayı çalıştır
if __name__ == '__main__':
app.run(debug=True)

Adım 3: Frontend Kodunu Yazma (index.html)​

Bu dosya, sitemizin iskeletini oluşturur. app.py'den gelen ürün verilerini alıp dinamik olarak listeler.

Kod: 
templates/index.html
dosyasının içeriği:
HTML: 
<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gemini E-Ticaret</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>

    <header>
        <h1>Hoş Geldiniz!</h1>
        <p>En Yeni Teknolojik Ürünler</p>
    </header>

    <main>
        <div class="product-grid">
            {% for product in products %}
            <div class="product-card">
                <img src="{{ product.image }}" alt="{{ product.name }}">
                <h2>{{ product.name }}</h2>
                <p class="price">{{ "%.2f"|format(product.price) }} ₺</p>
                <button class="add-to-cart-btn">Sepete Ekle</button>
            </div>
            {% endfor %}
        </div>
    </main>

    <footer>
        <p>&copy; 2025 KralForum E-Ticaret Sitesi</p>
    </footer>

    <script src="{{ url_for('static', filename='js/script.js') }}"></script>
</body>
</html>

Adım 4: Siteyi Güzelleştirme (style.css)​

Sitemizin daha modern ve düzenli görünmesi için CSS kodlarını ekleyelim.

Kod: 
static/css/style.css
dosyasının içeriği:

CSS: 
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
}

header {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 2rem 0;
}

main {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.product-card {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}

.product-card:hover {
    transform: translateY(-5px);
}

.product-card img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.product-card h2 {
    font-size: 1.2rem;
    margin: 1rem 0 0.5rem;
}

.price {
    font-size: 1.1rem;
    font-weight: bold;
    color: #007BFF;
}

.add-to-cart-btn {
    background-color: #007BFF;
    color: #fff;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 1rem;
    transition: background-color 0.2s;
}

.add-to-cart-btn:hover {
    background-color: #0056b3;
}

footer {
    text-align: center;
    padding: 1rem 0;
    background-color: #333;
    color: #fff;
    margin-top: 2rem;
}

Adım 5: Etkileşim Ekleme (script.js)​

"Sepete Ekle" butonuna basıldığında basit bir bildirim gösterelim.

Kod: 
static/js/script.js
dosyasının içeriği:
JavaScript: 
document.addEventListener('DOMContentLoaded', () => {
    const buttons = document.querySelectorAll('.add-to-cart-btn');

    buttons.forEach(button => {
        button.addEventListener('click', () => {
            alert('Ürün sepete eklendi! (Bu bir prototiptir)');
        });
    });
});

Siteyi Çalıştırma​

  1. Tüm dosyaları doğru klasör yapısına kaydettiğinizden emin olun.
  2. Terminali açın ve e-ticaret-sitesi ana klasöründeyken şu komutu çalıştırın:

Bash: 
python app.py
  1. Terminalde *
    Kod: 
    Running on http://127.0.0.1:5000/
    gibi bir çıktı göreceksiniz.
  2. Web tarayıcınızı açın ve
    Kod: 
    http://127.0.0.1:5000/
    adresine gidin.
Tebrikler! Artık ürünleri listeleyen basit bir alışveriş sitesi prototipine sahipsiniz.

Sonraki Adımlar​

Bu sadece bir başlangıç noktasıdır. Gerçek bir e-ticaret sitesi için eklenmesi gereken birçok özellik vardır:
  • Gerçek Bir Veritabanı: Ürünleri, kullanıcıları ve siparişleri saklamak için (Örn: PostgreSQL, MySQL).
  • Kullanıcı Giriş/Kayıt Sistemi: Müşterilerin hesap oluşturması için.
  • Ürün Detay Sayfası: Her ürün için ayrı bir sayfa.
  • Sepet Fonksiyonu: Kullanıcıların ürün ekleyip çıkarabileceği gerçek bir sepet.
  • Ödeme Sistemi Entegrasyonu: Kredi kartı ile ödeme almak için (Örn: Stripe, Iyzico).
  • Admin Paneli: Ürün eklemek, silmek ve siparişleri yönetmek için.
 
Cevap yazmak için giriş yap yada kayıt ol.

KFN Haberleri

Üst