كيف اقوم بإنشاء صفحة لكل اعلان

Moro Mara · 12 أبريل 2023

اعمل على تصميم موقع اعلانات لمنتجات. واريد عند الضغط على اعلان المنتج ان ينقلني الى صفحة فيها معلومات المنتج كما في اغلب المواقع .. السؤال. كيف يتم ذلك. هل يتم انشاء صفحة لكل منتج ووضع رابطها في الاعلان ام هناك طريقة اخرى لذلك. لان عدد الاعلانات سيكون كبير ومتجدد. ارجو الافادة😔😢

عمر قره محمد · 12 أبريل 2023

لا لن ننشئ صفحة لكل اعلان،

بل نقوم بإنشاء صفحة ديناميكية dynamic للإعلان، والية انشاء هذه الصفحات ليست بتلك الصعوبة و تختلف باختلاف بيئة العمل التي تستخدمها ( ... , react , next)، بينما سيكون صعبة جداً باستخدام css و html و js العاديين.

لإنشاء صفحات ديناميكية في React مثلاً، يمكنك استخدام المكتبة React Router2. حيث يمكنك تعريف مسارات ديناميكية باستخدام المعاملات في عنوان الـ URL. على سبيل المثال، يمكنك تعريف مسار مثل example.com/ads/:adId حيث adId هو معامل يمكن استخدامه لاسترداد البيانات لمستخدم محدد (عبر إرسال طلب إلى السيرفر يحتوي على هذا المعامل).

وبعد الحصول على معلومات الاعلان نقوم بعرض هذه المعلومات في الصفحة.

بعد قول هذا فقد ننشئ صفحة لكل اعلان إذا كان عدد الاعلانات قليل، وإذا كانت تختلف عن بعضها البعض،

قد اتمكن من مساعدتك بشكل اكبر إذا قمت بمشاركة بيئة العمل التي تستخدمها.

Mustafa Suleiman · 12 أبريل 2023

تتمثل الطريقة الأكثر شيوعًا في إنشاء صفحة فريدة لكل إعلان على الموقع، من خلال إنشاء صفحة HTML مخصصة تحتوي على معلومات المنتج المحددة، والتي يتم تحميلها وعرضها عند النقر على إعلان المنتج، ويمكن أن يكون لكل صفحة عنوان URL فريد ، مما يسمح للمستخدمين بالرجوع إليها في أي وقت.

وإنشاء صفحة فريدة لكل إعلان يسهل التعامل مع محتوى الموقع وتحديثه وصيانته بشكل فعال. بالإضافة إلى تحسين الأداء العام للموقع من خلال تخزين المحتوى المخصص للصفحات على مستوى التخزين المؤقت للمتصفح، مما يحد من حجم البيانات المرسلة بين المتصفح والخادم.

وفي حالة كون عدد الإعلانات كبيرًا جدًا ومتجددًا باستمرار، يمكن استخدام منصات إدارة المحتوى مثل WordPress لإنشاء صفحات معلومات المنتجات بسهولة وتحديثها بسرعة، ويمكن استخدام السمات والإضافات لتخصيص التصميم والوظائف وتوفير المزيد من الخيارات والمرونة في إدارة المحتوى.

وإليك، مثال بسيط على كيفية إنشاء صفحة HTML فريدة لإعلان منتج وعرض معلومات المنتج المحددة:

HTML:

<!DOCTYPE html>
<html>
<head>
	<title>Product Ad Page</title>
</head>
<body>
	<h1>Product Name</h1>
	<img src="product-image.jpg" alt="Product Image">
	<p>Product Description</p>
	<ul>
		<li>Feature 1</li>
		<li>Feature 2</li>
		<li>Feature 3</li>
	</ul>
	<p>Price: $10</p>
</body>
</html>

كما ترى تم إنشاء صفحة HTML بسيطة تحتوي على اسم المنتج، صورة المنتج، وصف المنتج، وميزات المنتج، وسعر المنتج.

وبإمكانك تخصيص المعلومات الموجودة على الصفحة حسب الاحتياجات الخاصة بك، ويجب أن تحتوي صفحة المنتج على عنوان URL فريد ، على سبيل المثال: http://example.com/product-page.

ولتحقيق ذلك، يجب إنشاء ملف HTML فريد لكل منتج وتخزينه في مجلد على الخادم الذي يمكن الوصول إليه عند النقر على الإعلان.

بالإضافة إلى ذلك، باستطاعتك استخدام لغة البرمجة مثل PHP لتوليد محتوى الصفحة الديناميكي لتمكين المستخدمين من تفاعل مع صفحات المنتج بطريقة مخصصة أكثر، كالتالي:

HTML:

<!DOCTYPE html>
<html>
<head>
	<title>Product Ad Page</title>
</head>
<body>
	<h1><?php echo $product_name; ?></h1>
	<img src="<?php echo $product_image; ?>" alt="Product Image">
	<p><?php echo $product_description; ?></p>
	<ul>
		<?php foreach ($product_features as $feature) : ?>
			<li><?php echo $feature; ?></li>
		<?php endforeach; ?>
	</ul>
	<p>Price: <?php echo $product_price; ?></p>
</body>
</html>

PHP:

<?php
// استدعاء بيانات المنتج من قاعدة البيانات أو ملف معين
$product_name = "Product Name";
$product_image = "product-image.jpg";
$product_description = "Product Description";
$product_features = array("Feature 1", "Feature 2", "Feature 3");
$product_price = "$10";
?>

وأيضًا بإمكانك استخدام React مع Express لإنشاء تطبيق ويب ديناميكي.

حيث React هي مكتبة خاصة بالواجهة الأمامية (Front-End) لإنشاء واجهة المستخدم، ويستخدم Express كإطار عمل لجانب الخادم (Back-End) لإنشاء خدمات الويب وإدارة الملفات والاتصالات مع قاعدة البيانات.

حيث يتم استخدام Express لإنشاء خدمات ويب API لإرجاع بيانات المنتجات من قاعدة البيانات، واستخدام React لإنشاء واجهة المستخدم وتحميل بيانات المنتجات باستخدام خدمات ويب API.

مثلاً، استخدام fetch() API المدمجة في React لاستدعاء بيانات المنتجات من Express API، وتصميم واجهة المستخدم باستخدام JSX وتخصيصها باستخدام العناصر المتاحة في React مثل الأشكال والأزرار والجداول والقوائم وغيرها.

وبالطبع، يمكن استخدام Express لتقديم ملفات HTML والملفات الثابتة (مثل الصور والأيقونات وملفات CSS وJavaScript) والوظائف الأخرى المتاحة للخادم.

وإليك مثال على كيفية استخدام React و Express و React Router معًا لإنشاء تطبيق ويب ديناميكي:

في ملف server.js (Express):

const express = require('express');
const app = express();
const PORT = process.env.PORT || 3001;

// خدمة ويب API لاسترداد بيانات المنتجات
app.get('/api/products', (req, res) => {
  const products = [
    { id: 1, name: 'Product 1', price: 10.99 },
    { id: 2, name: 'Product 2', price: 15.99 },
    { id: 3, name: 'Product 3', price: 20.99 },
  ];
  res.json(products);
});

// يقوم Express بتقديم ملفات الويب الثابتة في المجلد public
app.use(express.static('public'));

// استمع على المنفذ المحدد
app.listen(PORT, () => console.log(`Server listening on port ${PORT}`));

في ملف App.js (React):

import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import './App.css';

function App() {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    fetch('/api/products') // استدعاء API المنتجات من Express
      .then(response => response.json())
      .then(data => setProducts(data))
      .catch(error => console.error(error));
  }, []);

  return (
    <Router>
      <div className="App">
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/products">Products</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route path="/products">
            <Products products={products} />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  return (
    <div>
      <h2>Home</h2>
      <p>Welcome to our website!</p>
    </div>
  );
}

function Products({ products }) {
  return (
    <div>
      <h2>Products</h2>
      <ul>
        {products.map(product => (
          <li key={product.id}>
            {product.name} - ${product.price}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

أحمد رضا5 · 12 أبريل 2023

لا نحتاج لعمل صفحة لكل منتج بشكل حرفي، ولكن سنقوم بعمل قالب للمنتج ويستخدم مع كل منتج مع تغير المحتوي القادم من السيرفر.

يمكن القيام بذلك عن طريق اتباع هذة الخطوات:

1- إنشاء صفحة HTML: يجب أن تحتوي صفحة HTML على الهيكل الأساسي لصفحة الويب مثل عنوان الصفحة وعناوين الفقرات والصور والروابط وغيرها من العناصر. يمكن استخدام أي تصميم أو قالب لصفحة HTML ويمكن تخصيصه وفقًا لاحتياجات الموقع.

2- الاتصال بقاعدة البيانات: عند تصفح الموقع، يتعين على الخادم الاتصال بقاعدة البيانات لجلب معلومات المنتج الخاصة بالصفحة الفردية. يمكن استخدام أي لغة برمجة مثل PHP أو Python أو Node.js أو Ruby on Rails لإجراء هذا الاتصال.

3- استعادة بيانات المنتج: يتم استعادة بيانات المنتج المطلوبة من قاعدة البيانات. يجب أن تشمل هذه المعلومات كل المعلومات المطلوبة للصفحة الفردية، مثل اسم المنتج والوصف والصور والأسعار ومعلومات الاتصال.

4- إظهار المعلومات: يتم عرض المعلومات المستردة من قاعدة البيانات على صفحة HTML باستخدام لغة البرمجة المستخدمة. يمكن تخصيص هذا العرض باستخدام CSS و JavaScript لجعل الصفحة مرئية وجذابة للمستخدم.

5- روابط الصفحات: يجب إنشاء روابط مختلفة لكل منتج في الموقع. يمكن تحديد روابط هذه الصفحات عن طريق تعريف مسار الصفحة المناسب لكل منتج. يمكن أن تكون هذه الروابط ذات طول ثابت (مثل example.com/product/123) أو قابلة للتعديل (مثل example.com/product?id=123).

يجب العمل أيضًا على إنشاء صفحات مختلفة لتصفح الأقسام والفئات المختلفة في الموقع والتي يمكن الوصول إليها من القائمة الرئيسية، وذلك لتحسين تنظيم الموقع وتسهيل عملية البحث والوصول إلى المنتجات.

محمد Fahmy · 12 أبريل 2023

لن تحتاج إلي إنشاء صفحة جديدة لكل منتج إذا كنت تستخدم أي إطار عمل من هذه الإطارات في تطوير الواجهة الأمامية:

ReactJs
VueJs
AngularJs

وهذا حل لهذه المشكلة باستخدم إطار العمل ReactJs.

لعرض معلومات المنتج بعد النقر على الإعلان، يمكن استخدام React Router. يتم إنشاء مسار لكل صفحة منفصلة تحتوي على معلومات المنتج وتمرير المعرِّف المناسب كوسيط له. يمكن استخدام دالة جاهزة من قِبل الإطار لتحديد المسار المطلوب.

فيما يلي خطوات عملية لتحقيق ذلك:

1. تثبيت المكون الإضافي React Router: يمكن القيام بذلك باستخدام npm باستخدام الأمر التالي:

npm install react-router-dom

2. إضافة مكون BrowserRouter: هذا المكون يستخدم كل ما يتعلق بالتوجيه على مستوى التطبيق ويتم تضمينه في مكون App.js:

import { BrowserRouter, Route, Switch } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <div>
        <Switch>
          <Route path="/" component={Home} exact />
          <Route path="/product/:id" component={Product} exact />
        </Switch>
      </div>
    </BrowserRouter>
  );
}

في هذا المثال، يتم تسجيل صفحتين: Home وProduct. يتم توجيه المستخدم إلى Home عندما يفتح الموقع في البداية.

3. إنشاء مكون بصفحة المنتج: يمكن إنشاء مكون جديد بصفحة المنتج تدعى Product.js واعتماداً على المعرف، يمكن عرض معلومات المنتج.

function Product(props) {
  return (
    <div>
      <h1>Product {props.match.params.id}</h1>
      <p>This is product page with ID {props.match.params.id}</p>
    </div>
  );
}

4. تمرير المعرف المنتج عبر الرابط التالي:

<Link to={`/product/${product.id}`}>View Product Details</Link>

مع النقر على الرابط، سيتم تحميل صفحة معلومات المنتج بناءً على المعرف الذي تم تمريره في الرابط.

بهذه الطريقة، يمكن عرض معلومات المنتج عند النقر على الإعلان دون الحاجة لإنشاء صفحة جديدة لكل منتج.

Moro Mara · 12 أبريل 2023

بتاريخ 5 ساعة قال عمر قره محمد:

لا لن ننشئ صفحة لكل اعلان،

بل نقوم بإنشاء صفحة ديناميكية dynamic للإعلان، والية انشاء هذه الصفحات ليست بتلك الصعوبة و تختلف باختلاف بيئة العمل التي تستخدمها ( ... , react , next)، بينما سيكون صعبة جداً باستخدام css و html و js العاديين.

لإنشاء صفحات ديناميكية في React مثلاً، يمكنك استخدام المكتبة React Router2. حيث يمكنك تعريف مسارات ديناميكية باستخدام المعاملات في عنوان الـ URL. على سبيل المثال، يمكنك تعريف مسار مثل example.com/ads/:adId حيث adId هو معامل يمكن استخدامه لاسترداد البيانات لمستخدم محدد (عبر إرسال طلب إلى السيرفر يحتوي على هذا المعامل).

وبعد الحصول على معلومات الاعلان نقوم بعرض هذه المعلومات في الصفحة.

بعد قول هذا فقد ننشئ صفحة لكل اعلان إذا كان عدد الاعلانات قليل، وإذا كانت تختلف عن بعضها البعض،

قد اتمكن من مساعدتك بشكل اكبر إذا قمت بمشاركة بيئة العمل التي تستخدمها.

انا استخدم asp.net. لانشاء موقع بي لغة c#. Css html. Java. Ext الخ

عبدالباسط ابراهيم · 12 أبريل 2023

بتاريخ 4 ساعة قال Abdulmalek:

انا استخدم asp.net. لانشاء موقع بي لغة c#. Css html. Java. Ext الخ

يمكن استخدام إطار العمل ASP.NET MVC لإنشاء صفحة واحدة تحتوي على تفاصيل كل منتج، والتي يمكن الوصول إليها باستخدام معرف فريد لكل منتج. يمكن استخدام الإطار Entity Framework لإنشاء موديل لكل منتج وحفظه في قاعدة البيانات، ومن ثم استخدام عرض (View) واحد لعرض تفاصيل المنتجات. يمكن استخدام رابط ديناميكي (Dynamic Link) يحتوي على معرف المنتج في عنوان URL للوصول إلى الصفحة الخاصة بتفاصيل المنتج.

لنفترض أن لديك تطبيق ASP.NET MVC للإعلانات على الإنترنت وتريد إنشاء صفحة تفاصيل المنتجات التي يتم الوصول إليها عند النقر على إعلان منتج. سنفترض أيضًا أن لديك قاعدة بيانات تحتوي على جدول يسمى Products يحتوي على معلومات المنتجات.

يتم إنشاء موديل (Model) باستخدام Entity Framework ويحتوي على جميع المعلومات المتعلقة بالمنتج، مثل الاسم والوصف والصور والسعر وغيرها. يمكن إنشاء موديل بالشكل التالي:

public class Product
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Description { get; set; }
    public decimal Price { get; set; }
    public string ImageUrl { get; set; }
}

يتم إنشاء قاعدة بيانات باستخدام Entity Framework وإضافة جدول يحتوي على بيانات المنتجات. يمكن إنشاء قاعدة بيانات باستخدام أدوات إدارة قاعدة البيانات مثل Microsoft SQL Server أو MySQL أو PostgreSQL أو Oracle. يمكن إنشاء قاعدة بيانات بالشكل التالي:

CREATE TABLE Products
(
    Id INT PRIMARY KEY IDENTITY,
    Name NVARCHAR(50) NOT NULL,
    Description NVARCHAR(MAX),
    Price DECIMAL(18, 2) NOT NULL,
    ImageUrl NVARCHAR(MAX)
)

يتم إنشاء عرض (View) واحد لعرض تفاصيل المنتجات. يمكن استخدام أدوات ASP.NET MVC مثل Razor View Engine لإنشاء العرض. يمكن إنشاء العرض بالشكل التالي:

@model Product

<h2>@Model.Name</h2>
<p>@Model.Description</p>
<p>Price: @Model.Price</p>
<img src="@Model.ImageUrl" alt="@Model.Name" />

يتم إنشاء إجراء تحكم (Controller Action) لاسترداد بيانات المنتجات من قاعدة البيانات وعرضها في العرض (View). يمكن استخدام أدوات ASP.NET MVC لإنشاء الإجراء. يمكن إنشاء الإجراء بالشكل التالي:

public class ProductController : Controller
{
    private readonly ApplicationDbContext _db;

    public ProductController(ApplicationDbContext db)
    {
        _db = db;
    }

    public IActionResult Details(int id)
    {
        var product = _db.Products.Find(id);
        if (product == null)
        {
            return NotFound();
        }

        return View(product);
    }
}

إضافة رابط ديناميكي (Dynamic Link) يحتوي على معرف المنتج في عنوان URL لكل إعلان على الموقع

<a href="@Url.Action("Details", "Product", new { id = product.Id })">@product.Name</a>

كيف اقوم بإنشاء صفحة لكل اعلان

السؤال

Moro Mara

6 أجوبة على هذا السؤال

Recommended Posts

عمر قره محمد

لا لن ننشئ صفحة لكل اعلان،

وبعد الحصول على معلومات الاعلان نقوم بعرض هذه المعلومات في الصفحة.

بعد قول هذا فقد ننشئ صفحة لكل اعلان إذا كان عدد الاعلانات قليل، وإذا كانت تختلف عن بعضها البعض،

قد اتمكن من مساعدتك بشكل اكبر إذا قمت بمشاركة بيئة العمل التي تستخدمها.

Mustafa Suleiman

أحمد رضا5

محمد Fahmy

Moro Mara

لا لن ننشئ صفحة لكل اعلان،

وبعد الحصول على معلومات الاعلان نقوم بعرض هذه المعلومات في الصفحة.

بعد قول هذا فقد ننشئ صفحة لكل اعلان إذا كان عدد الاعلانات قليل، وإذا كانت تختلف عن بعضها البعض،

قد اتمكن من مساعدتك بشكل اكبر إذا قمت بمشاركة بيئة العمل التي تستخدمها.

عبدالباسط ابراهيم

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية