انشاء صفحة تقصيرروابط بقاعدة بيانات وتصميم وصفحة وسيطة للاعلانات

Conversion page with a rule


  تقصير الروابط تلقائيًا باستخدام PHP وMySQL.

صفحة وسيطة تحتوي على إعلان قبل إعادة التوجيه.

تصميم أنيق ومتجاوب.

لوحة تسجيل دخول مستقبلية ممكنة لإدارة الروابط (إذا رغبت لاحقًا).

📦 المحتويات :

قاعدة بيانات links_db مع جدول links.

صفحة index.php لتقصير الروابط.

صفحة redirect.php لعرض إعلان ثم إعادة التوجيه.

تصميم CSS أنيق.

كود إعلاني جاهز لإضافته في الصفحة الوسيطة.

🛠️ أولًا: إعداد قاعدة البيانات


hljs.highlightAll();

:root {
–code-bg: #f5f5f5;
–code-color: #333;
–button-bg: #007BFF;
–button-color: white;
–title-color: #d84315;
}
[data-theme=”dark”] {
–code-bg: #1e1e1e;
–code-color: #f5f5f5;
–button-bg: #2196f3;
–button-color: white;
–title-color: #ffb74d;
}
.code-box {
background: var(–code-bg);
color: var(–code-color);
padding: 15px;
border-radius: 10px;
margin: 20px auto;
font-family: monospace;
position: relative;
overflow: auto;
}
.code-title {
font-weight: bold;
font-size: 16px;
color: var(–title-color);
margin-bottom: 8px;
}
.code-buttons {
display: flex;
gap: 8px;
margin-top: 10px;
justify-content: flex-end;
flex-wrap: wrap;
}
.code-buttons button {
padding: 6px 10px;
background-color: var(–button-bg);
border: none;
color: var(–button-color);
font-size: 13px;
border-radius: 6px;
cursor: pointer;
transition: 0.3s;
}
.code-buttons button:hover {
opacity: 0.85;
}



?? تبديل الوضع

إعداد قاعدة البيانات
CREATE DATABASE links_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

USE links_db;

CREATE TABLE links (
  id INT AUTO_INCREMENT PRIMARY KEY,
  code VARCHAR(10) UNIQUE NOT NULL,
  long_url TEXT NOT NULL,
  created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);
تحديد
نسخ
تحميل
توسيع

hljs.highlightAll();

function selectCode(btn) {
const code = btn.closest(‘.code-box’).querySelector(‘code’);
const range = document.createRange();
range.selectNodeContents(code);
const sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
}

function copyCode(btn) {
const code = btn.closest(‘.code-box’).querySelector(‘code’).innerText;
navigator.clipboard.writeText(code).then(() => alert(“تم النسخ!”));
}

function downloadCode(btn) {
const code = btn.closest(‘.code-box’).querySelector(‘code’).innerText;
const blob = new Blob(, { type: “text/plain” });
const link = document.createElement(“a”);
link.href = URL.createObjectURL(blob);
link.download = “code.txt”;
link.click();
}

function expandCode(btn) {
const codeContent = btn.closest(‘.code-box’).innerHTML;
const popup = window.open(“”, “_blank”, “width=800,height=600”);
popup.document.write(`

كود موسع

body { background: var(–code-bg); color: var(–code-color); font-family: monospace; padding: 20px; }

${codeContent}

hljs.highlightAll();

`);
}

(function autoTheme() {
const prefersDark = window.matchMedia(“(prefers-color-scheme: dark)”).matches;
document.querySelectorAll(‘.code-box-wrapper’).forEach(box => {
box.setAttribute(“data-theme”, prefersDark ? “dark” : “light”);
});
updateThemeStyles(prefersDark ? “dark” : “light”);
})();

function toggleTheme() {
const wrapper = document.querySelector(“.code-box-wrapper”);
const current = wrapper.getAttribute(“data-theme”);
const newTheme = current === “dark” ? “light” : “dark”;
wrapper.setAttribute(“data-theme”, newTheme);
updateThemeStyles(newTheme);
}

function updateThemeStyles(theme) {
const themeLink = document.getElementById(“hljs-theme”);
themeLink.href = theme === “dark”
? “https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github-dark.min.css”
: “https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github.min.css”;
}


صفحة تقصير الروابط
connect_error) die("فشل الاتصال: " . $conn->connect_error);

$shortUrl = '';
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $longUrl = trim($_POST["long_url"]);
    $code = substr(str_shuffle("abcdefghijklmnopqrstuvwxyz0123456789"), 0, 6);
    $stmt = $conn->prepare("INSERT INTO links (code, long_url) VALUES (?, ?)");
    $stmt->bind_param("ss", $code, $longUrl);
    $stmt->execute();
    $shortUrl = $_SERVER['HTTP_HOST'] . dirname($_SERVER['PHP_SELF']) . "/redirect.php?r=$code";
    $stmt->close();
}
?>




  
  تقصير الروابط
  
    body {
      font-family: Arial;
      text-align: center;
      direction: rtl;
      background-color: #f2f2f2;
      padding: 40px;
    }
    input[type="url"] {
      width: 80%;
      padding: 12px;
      font-size: 16px;
      margin: 10px;
      border-radius: 8px;
      border: 1px solid #ccc;
    }
    button {
      padding: 12px 20px;
      background-color: #007bff;
      color: white;
      font-size: 16px;
      border: none;
      border-radius: 8px;
      cursor: pointer;
    }
    button:hover {
      background-color: #0056b3;
    }
    .result {
      margin-top: 20px;
      font-size: 18px;
      background: #fff;
      padding: 10px;
      display: inline-block;
      border-radius: 8px;
      border: 1px solid #ddd;
    }
  



🔗 أداة تقصير الروابط


اختصار الرابط
🎉 الرابط المختصر:
<a href="//" target="_blank">
تحديد
نسخ
تحميل
توسيع

✅ خطوات التشغيل:

أنشئ قاعدة البيانات باستخدام الكود أعلاه.

عدّل بيانات الاتصال في index.php و redirect.php حسب قاعدة بياناتك.

استبدل ضع_رمز_Adsterra_هنا بكود الإعلان من Adsterra.

لتحميل صفحة التحويل

.button-outline-blue {
display: inline-block;
padding: 10px 20px;
margin: 10px 5px;
font-size: 16px;
font-weight: bold;
color: #007BFF; /* أزرق */
background-color: #ffffff; /* أبيض */
border: 2px solid #007BFF;
border-radius: 8px;
cursor: pointer;
text-decoration: none;
transition: all 0.3s ease;
}

.button-outline-blue:hover {
background-color: #f0f8ff; /* خلفية زرقاء خفيفة */
}

.button-outline-blue:active {
color: #dc3545; /* أحمر */
background-color: #ffe5e5; /* خلفية حمراء فاتحة */
border-color: #dc3545;
}

تحميل صفحة تحويل

ارفع الملفات على استضافتك التي تدعم PHP + MySQL.

أضف تعليق

تصميم موقع كهذا باستخدام ووردبريس.كوم
ابدأ