Product Catalog

A Product Catalog is a comprehensive listing of all products or services offered by a business. It serves as a central repository for product information, including names, descriptions, images, prices, stock levels, and other relevant attributes. In web development, especially for e-commerce or inventory management systems, a product catalog is a fundamental component that allows users to browse, search, and view details about available items.

Key features and functionalities of a typical web-based product catalog include:

1. Product Listing: Displaying a grid or list of products, often with a thumbnail image, name, and price.
2. Product Details Page: A dedicated page for each product showing extensive information like full description, multiple images, specifications, customer reviews, and purchase options.
3. Search and Filtering: Allowing users to find specific products by keywords or narrow down results based on categories, price ranges, brands, or other attributes.
4. Sorting: Enabling users to arrange products by price (low to high, high to low), new arrivals, popularity, etc.
5. Pagination: Breaking down large catalogs into multiple pages for easier navigation.
6. Category Management: Organizing products into hierarchical categories and subcategories.
7. Inventory Tracking: Displaying current stock levels or availability status.
8. Image Management: Handling multiple images per product, including thumbnails and high-resolution versions.

Implementation typically involves storing product data in a database (like MySQL, PostgreSQL) and using a server-side language (like PHP, Python, Node.js) to retrieve and dynamically render this data on a web page. Frontend technologies (HTML, CSS, JavaScript) are used to present the information to the user in an engaging and interactive way.

Example Code

<?php

// Simulate a database with an array of products
$products = [
    [
        'id' => 1,
        'name' => 'Akıllı Telefon X',
        'description' => 'Yüksek performanslı ve şık tasarımlı akıllı telefon.',
        'price' => 799.99,
        'image' => 'https://via.placeholder.com/150/0000FF/FFFFFF?text=TelefonX',
        'stock' => 50,
        'category' => 'Elektronik'
    ],
    [
        'id' => 2,
        'name' => 'Dizüstü Bilgisayar Pro',
        'description' => 'İş ve oyun için ideal, hızlı işlemcili dizüstü bilgisayar.',
        'price' => 1299.00,
        'image' => 'https://via.placeholder.com/150/FF0000/FFFFFF?text=LaptopPro',
        'stock' => 25,
        'category' => 'Elektronik'
    ],
    [
        'id' => 3,
        'name' => 'Kablosuz Kulaklık V3',
        'description' => 'Mükemmel ses kalitesi sunan, uzun ömürlü kablosuz kulaklık.',
        'price' => 149.50,
        'image' => 'https://via.placeholder.com/150/008000/FFFFFF?text=KulaklıkV3',
        'stock' => 120,
        'category' => 'Aksesuar'
    ],
    [
        'id' => 4,
        'name' => 'Akıllı Saat Z',
        'description' => 'Sağlık takibi ve bildirimler için gelişmiş akıllı saat.',
        'price' => 299.99,
        'image' => 'https://via.placeholder.com/150/800080/FFFFFF?text=AkıllıSaatZ',
        'stock' => 75,
        'category' => 'Aksesuar'
    ]
];

// Function to find a product by ID
function getProductById($id, $products) {
    foreach ($products as $product) {
        if ($product['id'] == $id) {
            return $product;
        }
    }
    return null;
}

// HTML header
echo '<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ürün Katalogu</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; background-color: #f4f4f4; }
        .container { max-width: 1200px; margin: auto; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
        .product-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
        .product-card { border: 1px solid #ddd; padding: 15px; border-radius: 8px; text-align: center; background-color: #fff; }
        .product-card img { max-width: 100%; height: auto; border-radius: 4px; margin-bottom: 10px; }
        .product-card h3 { margin: 10px 0; font-size: 1.2em; }
        .product-card p { color: #555; font-size: 0.9em; }
        .product-card .price { font-size: 1.3em; color: #e44d26; font-weight: bold; margin-top: 5px; }
        .product-card a { display: inline-block; background-color: #007bff; color: white; padding: 8px 15px; text-decoration: none; border-radius: 5px; margin-top: 10px; }
        .product-card a:hover { background-color: #0056b3; }
        .product-detail { display: flex; gap: 30px; align-items: flex-start; }
        .product-detail img { max-width: 300px; height: auto; border-radius: 8px; }
        .product-info h2 { margin-top: 0; }
        .product-info .price { font-size: 1.8em; color: #e44d26; font-weight: bold; margin-bottom: 15px; }
        .product-info p { line-height: 1.6; color: #333; }
        .back-link { display: inline-block; margin-bottom: 20px; color: #007bff; text-decoration: none; }
        .back-link:hover { text-decoration: underline; }
    </style>
</head>
<body>
<div class="container">
';

// Check if a specific product ID is requested
if (isset($_GET['id']) && is_numeric($_GET['id'])) {
    $productId = (int)$_GET['id'];
    $product = getProductById($productId, $products);

    if ($product) {
        // Display product details
        echo '<a href="index.php" class="back-link">← Tüm Ürünlere Geri Dön</a>
              <div class="product-detail">
                  <img src="' . htmlspecialchars($product['image']) . '" alt="' . htmlspecialchars($product['name']) . '">
                  <div class="product-info">
                      <h2>' . htmlspecialchars($product['name']) . '</h2>
                      <p class="price">' . number_format($product['price'], 2) . ' TL</p>
                      <p><strong>Kategori:</strong> ' . htmlspecialchars($product['category']) . '</p>
                      <p><strong>Açıklama:</strong> ' . htmlspecialchars($product['description']) . '</p>
                      <p><strong>Stok Durumu:</strong> ' . htmlspecialchars($product['stock']) . ' Adet</p>
                      <button style="background-color: #28a745; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 1em;">Sepete Ekle</button>
                  </div>
              </div>';
    } else {
        echo '<h1>Ürün Bulunamadı</h1><p>Aradığınız ürün mevcut değil.</p><a href="index.php" class="back-link">← Tüm Ürünlere Geri Dön</a>';
    }
} else {
    // Display product list
    echo '<h1>Ürün Katalogu</h1>
          <div class="product-list">';
    foreach ($products as $product) {
        echo '<div class="product-card">
                  <img src="' . htmlspecialchars($product['image']) . '" alt="' . htmlspecialchars($product['name']) . '">
                  <h3>' . htmlspecialchars($product['name']) . '</h3>
                  <p class="price">' . number_format($product['price'], 2) . ' TL</p>
                  <a href="?id=' . htmlspecialchars($product['id']) . '">Detayları Gör</a>
              </div>';
    }
    echo '</div>';
}

// HTML footer
echo '</div>
</body>
</html>';

?>

Example Code

Related Topics