إنشاء موقع بالإعتماد على إطار العمل الشهير بوتستراب (Bootstrap)

Chokri.Z · ‏14/5/2022

أهلا و سهلا بكل الإخوة الإعزاء
أردت أن يكون أول ما أكتب و أشارك به في هذا المنتدى الجميل و الغني بالمادة، شئ أفيد به و أستفيد.
هذا شعاري على كل حال .

أردت في هذا الموضوع أن أتطرق إلى إطار عمل كامل تقريبا و هو الـبوتستراب ، لنحاول معا صنع و تطوير موقع واب بالإستفادة من كل ما هو جديد (إلى حد كتابة هذه الأسطر) في مجال تطوير المواقع.

المشروع سيكون من الصفرطبعا بعد أن يكون الإخوة الأعضاء الذين يودون المشاركة، لديهم فكرة على لغة الـ HTML و الـ CSS على الأقل، و مستعدون. و من هنا نستطيع أن نبدأ إن أراد أحدكم الإطلاع .

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

أخوكم في الله شكري

Chokri.Z · ‏15/5/2022

السلام عليكم
في ما يلي نمط و كيفية تقدم الإنجاز:
كود:
# مقدمة
******
إنشاء موقع متعدد الصفحات قابل للبرمجة
******

1.التقنيات التي سيتم استخدامها

* الـ HTML *
* الـ CSS *
* الـ JavaScript *


2.إنشاء الملفات والمجلدات الأساسية

- /CSS
- /JS
- /Images
--- /logos
--- /bg
--- /avatars
index.php
gallery.php
contact.php
login.php
register.php
logout.php
هذا و يمكن زيادة أو تعديل بعض الملفات حسب الحاجة

Chokri.Z · ‏15/5/2022

تهيئة بيئة العمل

أول شئ، أريد أن أسوق ملاحظة صغيرة:
الموقع كما ذكرت آنفا سيكون بإذن الله قابل للبرمجة، أي ديناميكي. مما يتطلب اختيار لغة البرمجة من الأول كي يكون امتداد الملفات مطابق.
ستكون هذه الغة هي الـ PHP. إذا سيكون إمتداد الملفات "php."

الملفات ذات الإمتداد المذكور (php.) ، يتطلب نشغيلها سرفر أو خادم محلي يعمل كاستضافة افتراضية على جهازك.حيث تستطيع إنشاء موقع والعمل والتعديل عليه دون اتصال بشبكة الانترنت. لذا، وجب تنصيب واحدا على آلتنا، و سيكون بإذن الله الـ XAMPP .
بعد التحميل و التثبيت الذي عادة ما يكون على المسار "C:\xampp" ، نقوم بالدخول على مسار المجلد "C:\xampp\htdocs"
هذا الأخير،سيكون مكان عملنا ككل، أين سننشأ مجلد الموقع الرئيسي الذي بدوره سيجمع كل مجلدات و ملفات الموقع.
الآيبي الافتراضي للخادم الذي يمكننا من الإتصال هو 127.0.0.1، كما يمكن الوصول وتجربة موقعنا على العنوان "localhost" الشهير.
لمزيد الإطلاع لمعرفة السرفر المحلي بالتفصيل:

كود:

https://ar.wikipedia.org/wiki/%D8%A7%D9%84%D9%85%D8%B6%D9%8A%D9%81_%D8%A7%D9%84%D9%85%D8%AD%D9%84%D9%8A

يـــــــــتــــــــــــــــبــــــــــــــــــع

Chokri.Z · ‏16/5/2022

إنشاء الملفات والمجلدات الأساسية

بعد تهيئة بيئة العمل، نأتي الآن إلى إنشاء المجلد الرئيسي للموقع.
نقوم بالدخول على المسار "C:\xampp\htdocs" ، ثم ننشأ مجلد جديد و نسميه itabcode.
داخل هذا الأخير، نقوم بإنشاء ملف "index.php" و هو أول ملف عادة سيبحث عنه السرفر و تتم قرائته. وبناءا على ما فيه من أوامر على شكل أكواد و بعد التحليل، يتم إرسال الإجابة للمتصفح أين يتم عرضها لمستخدم الانترنت (طالب المعلومة).

يـــتـــبـــع

ملاحظة تخص الإدارة: هل من الممكن إضافة خاصية إضافة مرفقات إلى المحرر؟

Chokri.Z · ‏16/5/2022

إنشاء الملفات والمجلدات الأساسية

ملف
"C:/xampp/htdocs/itabcode/index.php"
كود HTML:
<!doctype html>

<html lang="ar" dir="rtl">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>أكتب كود | الرئسية</title>
    </head>
    <body>
        <h1>مرحبا بكم على موقع الويب أكتب كود</h1>

    </body>
</html>
بما أن إنشاء الموقع سيكون بإذن الله بالإعتماد على إطار العمل "Bootstrap" ، سنقوم الآن بإدراجه داخل مجلد الموقع الرئسيي. و من ثم، نقوم بإنشاء مجلدات الملفات. واحد سيتضمن ملف أو ملفات النمط الخاصة بنا (css)، و الثاني سيتضمن ملفات الـ JavaScript (js) ، و الآخر سيتضمن الصور.

إدراج إطار العمل Bootstrap
سنقوم بتحميله و إدراجه داخل المسار الرئيسي للموقع
"C:/xampp/htdocs/itabcode"
رابط التحميل :
كود:
https://github.com/twbs/bootstrap/releases/download/v5.0.2/bootstrap-5.0.2-dist.zip
العملية تمت بنجاح

تحرير و إدراج ملفاتنا
ملف نمط البوتستراب: سيتم إدراج هذا النمط لدعمه اللغة العربية
"C:/xampp\htdocs/itabcode/bootstrap/css/bootstrap.rtl.min.css"
ملف النمط الخاص بنا: "C:/xampp/htdocs/itabcode/css/default.css"
ملف الـ js للبوتستراب:
"C:/xampp/htdocs/itabcode/bootstrap/js/bootstrap.bundle.min.js"

ملف "C:/xampp/htdocs/itabcode/index.php" بعد التعديل و إدراج الملفات:
كود:
<!doctype html>

<html lang="ar" dir="rtl">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    
    <link href="bootstrap/css/bootstrap.rtl.min.css" rel="stylesheet">
    
    <link href="css/default.css" rel="stylesheet">

    <title>أكتب كود | الرئسية</title>
</head>

<body>
    <h1>مرحبا بكم على موقع الويب أكتب كود</h1>


    
    <script src="bootstrap/js/bootstrap.bundle.min.js"></script>

</body>

</html>
يـــتـــبـــع

Chokri.Z · ‏18/5/2022

إنشاء الملفات والمجلدات الأساسية

أولا، هناك بعض المكتبات التي اخترتها أن تساعدنا على حسن التصميم وجب إدراجها في المشروع.
- مكتبة تمرير الرسوم المتحركة " AOS"
نقوم بالتحميل، ثم ندرج نمط الـ "css" على المسار التالي: "C:/xampp/htdocs/itabcode/css/aos.css"
وملف الـ "js" على المسار "C:/xampp/htdocs/itabcode/js/plugins/aos.js"

- مكتبة الـ "JQuery"
نقوم بالتحميل، ثم ندرج الـملف على المسار التالي: "C:/xampp/htdocs/itabcode/js/jquery.min.js"

روابط التحميل:
كود:
https://unpkg.com/aos@2.3.1/dist/aos.css
https://unpkg.com/aos@2.3.1/dist/aos.js
https://code.jquery.com/jquery-3.6.0.min.js
و من ثمه، يتم إدراج الملفتات في الملف "index.php" على النحو التالي:
كود HTML:

    <script src="js/jquery.min.js"></script>
    
    <script src="bootstrap/js/bootstrap.bundle.min.js"></script>
    
    <script src="js/plugins/aos.js"></script>

</body>

</html>
- مكتبة الأيقونات الشهيرة "FortAwesome"
نقوم بالتحميل، ثم ندرجها على المسار التالي: "C:/xampp/htdocs/itabcode/fontawesome"
رابط التحميل :
كود:
https://use.fontawesome.com/releases/v6.1.1/fontawesome-free-6.1.1-web.zip
و من ثمه، يتم إدراج ملف النمط الخاص بها و المجود على المسار "C:/xampp/htdocs/itabcode/fontawesome/css/all.css" في الملف "index.php"

الآن، ندرج ملف النمط الخاص بنا و الموجود على المسار "C:/xampp/htdocs/itabcode/css/default.css" في الملف "index.php"

أخيرا وليس آخر، نقوم بإدراج ملف الـ js الخاص بـ "AOS" أسفل الصفحة

تمت العملية بنجاح
كود HTML:
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    
    <link href="bootstrap/css/bootstrap.rtl.min.css" rel="stylesheet">
    
    <link href="css/aos.css" rel="stylesheet">
    
    <link href="fontawesome/css/all.min.css" rel="stylesheet">
    
    <link href="css/default.css" rel="stylesheet">
  
    <title>أكتب كود | الرئسية</title>

</head>
كود HTML:

    <script src="js/jquery.min.js"></script>
    
    <script src="bootstrap/js/bootstrap.bundle.min.js"></script>
    
    <script src="js/plugins/aos.js"></script>
  

</body>

</html>
يـــتـــبـــع

Chokri.Z · ‏18/5/2022

إدراج القائمة الرئيسية للموقع ( Menu principal ) و بعض المحتوى

القائمة الرئيسية ستتظمن خمسة روابط بالعتبار الرابط الرئيسي.
- رابط معرض الصور
- رابط الإتصال
- رابط تسجيل الدخول أو الخروج ( حسب حالة الإتصال )
- رابط التسجيل بالموقع

الصفحة الرئيسة بعد ادراج القائمة و إضافة بعض المحتوى

كود PHP:

<?php session_start(); ?> <!doctype html>  <html lang="ar" dir="rtl"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">  <link href="bootstrap/css/bootstrap.rtl.min.css" rel="stylesheet"> <link href="css/aos.css" rel="stylesheet">  <link href="fontawesome/css/all.min.css" rel="stylesheet">  <link href="css/default.css" rel="stylesheet">  <title>أكتب كود |منتديات أكتب كود</title> </head> <body> <nav id="site-navbar" class="navbar navbar-expand-lg"> <div class="container-fluid"> <a class="navbar-brand" href="#">منتديات أكتب كود</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="index.php">الرئيسة</a> </li> <li class="nav-item"> <a class="nav-link" href="gallery.php">معرض الصور</a> </li> <li class="nav-item"> <a class="nav-link" href="contact.php">اتصل بنا</a> </li> </ul> <ul class="navbar-nav mx-auto"> <?php if (isset($_SESSION['uname'])) { ?> <li class="nav-item"> <a class="nav-link" href="logout.php">تسجيل الخروج</a> </li> <?php } else{?> <li class="nav-item"> <a class="nav-link" href="login.php">تسجيل الدخول</a> </li> <?php } ?> <li class="nav-item"> <a class="nav-link" href="register.php">انضم إلينا</a> </li> </ul> </div> </div> </nav> <div id="container" class="container"> <div class="row flex-lg-row-reverse align-items-center"> <div class="col-10 col-sm-8 col-lg-6" data-aos="fade-right" data-aos-duration="1000"> <img src="images/developpeur-logiciels-programmeur.webp" class="d-block mx-lg-auto img-fluid" alt="منتديات أكتب كود" width="700" height="500"> </div> <div class="col-lg-6" data-aos="fade-left" data-aos-duration="1000"> <h1 class="display-5 fw-bold lh-1 mb-3">مرحبا بكم على موقع الويب أكتب كود</h1> <h2>ما هو لوريم ايبسوم Lorem ipsum</h2> <p class="lead"> لوريم ايبسوم هو نموذج افتراضي يوضع في التصاميم لتعرض على العميل ليتصور طريقه وضع النصوص بالتصاميم سواء كانت تصاميم مطبوعه ... بروشور او فلاير على سبيل المثال ... او نماذج مواقع انترنت ... وعند موافقه العميل المبدئيه على التصميم يتم ازالة هذا النص من التصميم ويتم وضع النصوص النهائية المطلوبة للتصميم ويقول البعض ان وضع النصوص التجريبية بالتصميم قد تشغل المشاهد عن وضع الكثير من الملاحظات او الانتقادات للتصميم الاساسي. وخلافاَ للاعتقاد السائد فإن لوريم إيبسوم ليس نصاَ عشوائياً، بل إن له جذور في الأدب اللاتيني الكلاسيكي منذ العام 45 قبل الميلاد. من كتاب "حول أقاصي الخير والشر" <a class="btn btn-info btn-sm px-4 me-md-2" href="#" role="button">إقرأ المزيد</a> </p> </div> </div> </div>  <script src="js/jquery.min.js"></script>  <script src="bootstrap/js/bootstrap.bundle.min.js"></script> <script src="js/plugins/aos.js"></script> <script src="js/main.js"></script> </body> </html>
هذا كود نمط الـ css الخاص بنا كنت قد نسيت إدراجه

كود:

@charset "UTF-8";[/B][/CENTER][/B][/CENTER][/B][/CENTER] [B] [CENTER][B] [CENTER][B] [CENTER]:root, .default-theme{ font-size: 16px; --vh: 100vh; --theme-color: 210, 87, 11; --theme-second-color: 150, 6, 247; --theme-orange: 192, 20, 245; --theme-navbar-bg-color: 33, 37, 41; --theme-navbar-link-color: 178, 204, 214; } body{ font-family: 'Open Sans', sans-serif; color: #333; letter-spacing: 0.03ch; overflow: auto; } #site-navbar,.dropdown-menu{ background-color: rgb(var(--theme-navbar-bg-color)); } #site-navbar .nav-link, #site-navbar .dropdown-item{ color: rgb(var(--theme-navbar-link-color)); } #site-navbar .nav-link{ font-size: calc(100% + 2px); } #site-navbar .nav-link:hover, #site-navbar .dropdown-item:hover{ color: #fff; } #site-navbar .dropdown-item:hover{ background-color: #69657a; } .navbar-brand{ color: #fff; font-size: calc(100% + 18px); } .navbar-brand:hover{ color: rgb(var(--theme-color)); } #site-navbar .navbar-toggler { padding: 0.15rem 0.15rem; font-size: 1.16rem; line-height: 1; background-color: transparent; border: 1px solid transparent; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; } #site-navbar .navbar-toggler::before { display: block; position: absolute; color: rgb(var(--theme-navbar-link-color)); font: var(--fa-font-solid); content: "\f0c9"; text-rendering: auto; -webkit-font-smoothing: antialiased; } #site-navbar .navbar-toggler:focus { outline: none; -webkit-outline-style: none; -moz-outline-style: none; outline-style: none; -webkit-box-shadow: none; box-shadow: none; } h1,h2{ color: rgb(var(--theme-color)); }

Chokri.Z · ‏25/5/2022

إدراج مكتبة lightgallery و هي المكتبة التي سنعتمدها في عرض الصور، و تحرير ملف "gallery.php"

- تحميل المكتبة :
كود:
https://github.com/sachinchoolur/lightgallery.js/
في الحقيقة لن نحناج منها سوى مجلد واحد (dist)

- إدراجها في المشروع
بعد فك ضغط المجلد، نقوم بنسخ أو قص محتواه (dist) ، ثم نقوم بإدراجه داخل مجلد خاص به على المسار التالي:
"/C:/xampp/htdocs/itabcode/plugins/lightgallery"

العملية تمت بنجاح

نقوم الآن بالتعديل على ملف gallery.php

كود PHP:

<?php session_start(); ?>[/COLOR][/CENTER] [COLOR=#000000] [CENTER]<!doctype html> <html lang="ar" dir="rtl"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">  <link href="bootstrap/css/bootstrap.rtl.min.css" rel="stylesheet"> <link rel="stylesheet" href="plugins/lightgallery/css/lightgallery.min.css"> <link href="css/aos.css" rel="stylesheet">  <link href="fontawesome/css/all.min.css" rel="stylesheet">  <link href="css/default.css" rel="stylesheet">  <title>منتديات اكتب كود | معرض الصور</title> </head> <body> <nav id="site-navbar" class="navbar navbar-expand-lg"> <div class="container-fluid"> <a class="navbar-brand" href="index.php">منتديات أكتب كود</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link" aria-current="page" href="index.php"><i class="icon fa-light fa-house-signal"></i> الرئيسة</a> </li> <li class="nav-item"> <a class="nav-link active"><i class="icon fa-light fa-album-collection"></i> معرض الصور</a> </li> <li class="nav-item"> <a class="nav-link" href="#"><i class="icon fa-light fa-mailbox"></i> اتصل بنا</a> </li> </ul> <ul class="navbar-nav mx-auto"> <?php if (isset($_SESSION['uname'])) { ?> <li class="nav-item"> <a class="nav-link" href="#"><i class="icon fa-solid fa-right-from-bracket"></i> تسجيل الخروج</a> </li> <?php } else{?> <li class="nav-item"> <a class="nav-link" href="#"><i class="icon fa-light fa-right-to-bracket"></i> تسجيل الدخول</a> </li> <?php } ?> <li class="nav-item"> <a class="nav-link" href="#"><i class="icon fa-light fa-user-plus"></i> إنشاء حساب</a> </li> </ul> </div> </div> </nav> <div class="container"> <h1 class="fw-light text-center text-lg-start mt-4 mb-0">معرض الصور</h1> <hr class="mt-2 mb-4"> <div id="gallery" class="gallery" data-aos="zoom-in" data-aos-duration="1500"> <ul id="lightgallery" class="list-unstyled row"> <li class="col-xs-6 col-sm-4 col-md-3" data-responsive="images/img-1.jpg 375, images/img-1.jpg 480, images/img-1.jpg 800" data-src="images/img-1.jpg" data-sub-html="<h4>Fading Light</h4><p>Classic view from Rigwood Jetty on Coniston Water an old archive shot similar to an old post but a little later on.</p>" data-pinterest-text="Pin it1" data-tweet-text="share on twitter 1"> <a href=""> <img class="img-fluid" src="images/img-1.jpg" alt="Thumb-1"> </a> </li> <li class="col-xs-6 col-sm-4 col-md-3" data-responsive="images/img-2.jpg 375, images/img-2.jpg 480, images/2.jpg 800" data-src="images/img-2.jpg" data-sub-html="<h4>Bowness Bay</h4><p>A beautiful Sunrise this morning taken En-route to Keswick not one as planned but I'm extremely happy I was passing the right place at the right time....</p>" data-pinterest-text="Pin it1" data-tweet-text="share on twitter 1"> <a href=""> <img class="img-fluid" src="images/img-2.jpg" alt="Thumb-2"> </a> </li> <li class="col-xs-6 col-sm-4 col-md-3" data-responsive="images/img-3.jpg 375, images/img-3.jpg 480, images/img-3.jpg 800" data-src="images/img-3.jpg" data-sub-html="<h4>Bowness Bay</h4><p>A beautiful Sunrise this morning taken En-route to Keswick not one as planned but I'm extremely happy I was passing the right place at the right time....</p>" data-pinterest-text="Pin it1" data-tweet-text="share on twitter 1"> <a href=""> <img class="img-fluid" src="images/img-3.jpg" alt="Thumb-3"> </a> </li> <li class="col-xs-6 col-sm-4 col-md-3" data-responsive="images/img-4.jpg 375, images/img-4.jpg 480, images/4.jpg 800" data-src="images/img-4.jpg" data-sub-html="<h4>Bowness Bay</h4><p>A beautiful Sunrise this morning taken En-route to Keswick not one as planned but I'm extremely happy I was passing the right place at the right time....</p>" data-pinterest-text="Pin it1" data-tweet-text="share on twitter 1"> <a href=""> <img class="img-fluid" src="images/img-4.jpg" alt="Thumb-4"> </a> </li> <li class="col-xs-6 col-sm-4 col-md-3" data-responsive="images/img-5.jpg 375, images/img-5.jpg 480, images/img-5.jpg 800" data-src="images/img-5.jpg" data-sub-html="<h4>Fading Light</h4><p>Classic view from Rigwood Jetty on Coniston Water an old archive shot similar to an old post but a little later on.</p>" data-pinterest-text="Pin it1" data-tweet-text="share on twitter 1"> <a href=""> <img class="img-fluid" src="images/img-5.jpg" alt="Thumb-5"> </a> </li> <li class="col-xs-6 col-sm-4 col-md-3" data-responsive="images/img-6.jpg 375, images/img-6.jpg 480, images/img-6.jpg 800" data-src="images/img-6.jpg" data-sub-html="<h4>Fading Light</h4><p>Classic view from Rigwood Jetty on Coniston Water an old archive shot similar to an old post but a little later on.</p>" data-pinterest-text="Pin it1" data-tweet-text="share on twitter 1"> <a href=""> <img class="img-fluid" src="images/img-6.jpg" alt="Thumb-6"> </a> </li> <li class="col-xs-6 col-sm-4 col-md-3" data-responsive="images/img-7.jpg 375, images/img-7.jpg 480, images/img-7.jpg 800" data-src="images/img-7.jpg" data-sub-html="<h4>Fading Light</h4><p>Classic view from Rigwood Jetty on Coniston Water an old archive shot similar to an old post but a little later on.</p>" data-pinterest-text="Pin it1" data-tweet-text="share on twitter 1"> <a href=""> <img class="img-fluid" src="images/img-7.jpg" alt="Thumb-7"> </a> </li> <li class="col-xs-6 col-sm-4 col-md-3" data-responsive="images/img-8.jpg 375, images/img-8.jpg 480, images/img-8.jpg 800" data-src="images/img-8.jpg" data-sub-html="<h4>Fading Light</h4><p>Classic view from Rigwood Jetty on Coniston Water an old archive shot similar to an old post but a little later on.</p>" data-pinterest-text="Pin it1" data-tweet-text="share on twitter 1"> <a href=""> <img class="img-fluid" src="images/img-8.jpg" alt="Thumb-8"> </a> </li> </ul> </div> <hr class="mt-2 d-none d-lg-block"> </div>  <script src="js/jquery.min.js"></script>  <script src="bootstrap/js/bootstrap.bundle.min.js"></script>  <script src="plugins/lightgallery/picturefill.min.js"></script> <script src="plugins/lightgallery/lightgallery.min.js"></script> <script src="plugins/lightgallery/lg-pager.js"></script> <script src="plugins/lightgallery/lg-autoplay.js"></script> <script src="plugins/lightgallery/lg-fullscreen.js"></script> <script src="plugins/lightgallery/lg-zoom.js"></script> <script src="plugins/lightgallery/lg-hash.js"></script> <script src="plugins/lightgallery/lg-share.js"></script> <script src="plugins/lightgallery/lg-rotate.js"></script>  <script src="plugins/aos/aos.js"></script>  <script src="js/main.js"></script> </body> </html>
بعد هذه العملية، نقوم بتعديل ملف النمط الخاص بنا (default.css) بإضافة الكود التالي:

كود PHP:

html[dir="rtl"] .icon::after, html[dir="rtl"] .icon::before { -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; } .gallery{ padding-bottom: 80px; } .gallery > ul { margin-bottom: 0; } .gallery > ul > li { float: left; margin-bottom: 15px; margin-right: 20px; width: 200px; } .gallery > ul > li a { border: 3px solid #FFF; border-radius: 3px; display: block; overflow: hidden; position: relative; float: left; } .gallery > ul > li a > img { -webkit-transition: -webkit-transform 0.15s ease 0s; -moz-transition: -moz-transform 0.15s ease 0s; -o-transition: -o-transform 0.15s ease 0s; transition: transform 0.15s ease 0s; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); height: 100%; width: 100%; } .gallery > ul > li a:hover > img { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } #site-navbar .nav-link.active{ color: #fff !important; }

تم إرفاق مجلد المشروع

يـــتـــبـــبـــع

Chokri.Z · ‏25/5/2022

تعديل ملف الـ register.php

كود PHP:

<?php session_start(); ?> <!doctype html>  <html lang="ar" dir="rtl"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">  <link href="bootstrap/css/bootstrap.rtl.min.css" rel="stylesheet"> <link href="css/aos.css" rel="stylesheet">  <link href="fontawesome/css/all.min.css" rel="stylesheet">  <link href="css/default.css" rel="stylesheet">  <title>منتديات اكتب كود | تسجيل</title> </head> <body> <div class="container"> <div class="form-register py-2" data-aos="fade-down" data-aos-duration="500"> <h1 class="text-center display-5 mb-4 mx-1 mx-md-4"> <i class="fa-duotone fa-circle-user"></i> تسجيل </h1> <form class="row g-1 pb-2 form" action="#" enctype="multipart/form-data" data-avatar="images/ajax-loader.gif"> <div id="form-results" class="d-none"></div> <div class="col-md-6"> <div class="form-floating"> <input type="text" id="f_name" name="f_name" placeholder="الإسم" class="form-control required" data-bs-toggle="tooltip" data-bs-placement="left" title="خانة مطلوبة"> <label class="form-label" for="f_name"><span class="fw-bolder me-1" style="color: red" ;>*</span>الإسم</label> </div> </div> <div class="col-md-6"> <div class="form-floating"> <input type="text" id="l_name" name="l_name" placeholder="اللقب" class="form-control required" data-bs-toggle="tooltip" data-bs-placement="right" title="خانة مطلوبة"> <label class="form-label" for="l_name"><span class="fw-bolder me-1" style="color: red" ;>*</span>اللقب</label> </div> </div> <div class="col-md-6"> <div class="form-floating"> <input type="email" id="r_email" name="email" placeholder="البريد الإلكتروني" class="form-control required" data-bs-toggle="tooltip" data-bs-placement="left" title="خانة مطلوبة"> <label class="form-label" for="r_email"><span class="fw-bolder me-1" style="color: red" ;>*</span>البريد الإلكتروني</label> </div> </div> <div class="col-md-6"> <div class="form-floating"> <input type="text" id="uname" name="uname" placeholder="اسم المستخدم" class="form-control required" data-bs-toggle="tooltip" data-bs-placement="right" title="خانة مطلوبة"> <label class="form-label" for="uname"><span class="fw-bolder me-1" style="color: red" ;>*</span>اسم المستخدم</label> </div> </div> <div class="col-md-6"> <div class="form-floating"> <input type="password" id="r_pass" name="mdp" class="form-control required" data-bs-toggle="tooltip" data-bs-placement="left" title="خانة مطلوبة"> <label class="form-label" for="r_pass"><span class="fw-bolder me-1" style="color: red" ;>*</span>كلمة العبور</label> <span data-id="#r_pass" class="fa-light fa-eye field-icon-right toggle-password" data-bs-toggle="tooltip" title="انقر لإظهار كلمة المرور"></span> </div> </div> <div class="col-md-6"> <div class="form-floating"> <input type="password" id="cpass" name="cpass" class="form-control required" data-bs-toggle="tooltip" data-bs-placement="right" title="خانة مطلوبة"> <label class="form-label" for="cpass"><span class="fw-bolder me-1" style="color: red" ;>*</span>اعد كلمة العبور</label> </div> </div> <div class="col-md-6"> <div class="form-floating"> <input type="text" id="birthday" name="birthday" placeholder="تاريخ الميلاد ( dd/mm/yyyy )" class="form-control" data-bs-toggle="tooltip" data-bs-placement="left" title="خانة اختيارية"> <label class="form-label" for="birthday">تاريخ الميلاد ( <small class="text-warning">dd/mm/yyyy</small> )</label> </div> </div> <div class="col-md-6"> <div class="form-check form-check-inline mt-3"> <input class="form-check-input" type="radio" name="gender" id="male" value="male" data-bs-toggle="tooltip" data-bs-placement="top" title="خانة اختيارية"> <label class="form-check-label" for="male">ذكر</label> </div> <div class="form-check form-check-inline mt-3"> <input class="form-check-input" type="radio" name="gender" id="femal" value="femelle" data-bs-toggle="tooltip" data-bs-placement="top" title="خانة اختيارية"> <label class="form-check-label" for="femal">أنثى</label> </div> </div> <div class="col-12"> <div id="avatar-content" class="row g-1 justify-content-center align-items-center"> <div class="col-lg-8 col-md-auto py-2"> <label for="avatar" class="form-label lbl-avatar">الصورة الرمزية</label> <input type="file" id="avatar" name="avatar" class="form-control-file" data-bs-toggle="tooltip" data-bs-placement="left" title="خانة اختيارية"> </div> <div id="output" class="col-md-4 col"></div> </div> </div> <div class="col-md-12 mb-2 mt-2"> <div class="form-check"> <input class="form-check-input" type="checkbox" name="therms" value="d" id="therms" checked data-bs-toggle="tooltip" data-bs-placement="right" title="خانة مطلوبة"> <label class="form-check-label" for="therms"> أنا أتفق مع جميع البيانات الواردة في <a class="link" href="#!"> شروط الاستعمال </a> </label> </div> </div> <div class="col-12"> <div class="row"> <div class="col-md-6 mb-2"> <button type="submit" class="w-50 btn btn-primary btn-sm submit-btn"> سجل الآن </button> <a class="btn btn-primary btn-sm ms-2" href="index.php"> إلعاء </a> </div> <div class="col-md-6"> <small>لديك حساب ؟</small> <a href="#"> تسجيل الدخول </a> </div> </div> </div> </form> </div> </div>  <script src="js/jquery.min.js"></script>  <script src="bootstrap/js/bootstrap.bundle.min.js"></script> <script src="plugins/aos/aos.js"></script> <script src="js/main.js"></script> </body> </html>

بما أننا نستعمل مكتبة الـ " Fontawesome Pro" مع آخر إصدار ـ أحببت أن نستغلها أكثر ما يمكن.
تم التعديل على ملف المشروع المرفق.

المكتبة كاملة لا تنقص شئ هدية مني إليكم. (PRO)

يـــتـــبـــع

Chokri.Z · ‏31/5/2022

عذرا على التأخير
التعديل على ملف "C:/xampp/htdocs/itabcode/js/main.js"

سنقوم بالتعديل على الملف المذكور، بطريقة تسمح لنا بمراقبة الخانات ( المفروضة ) لكل استمارة (form) لها فئة (class) موحدة.
(class (.form
هذه الإستمارة، سيكون لها طبعا زر تأكيد (button submit). هذا الزر أيظا سيكون له فئة موحدة.
class (.submit-btn)
بهذه الكيفية أو الطريقة، نكون قد اختصرنا في عدد الأكواد المكتوبة غي المشروع، و ربحتا وقت إضافي و أكثر إرياحية.

أيضا سنقوم بإضافة كود يقوم بمراقبة الإمداد لأي صورة تم رفعها عند عملية التسجيل.
و بهذا نضمن أن يكون الملف المرفوع صورة.

كود PHP:

$(function(){ 'use strict'; // معرض الصور const gallery = document.getElementById('lightgallery'); if(gallery) lightGallery(gallery); // خاص بمراقبة الصورة إطا ما نم الرفغ const img = document.getElementById('avatar'); if (img) img.addEventListener('change', selectSingleFile); function selectSingleFile(e) { var file = e.target.files; // كائن "FileList" var f = file[0]; var output = document.getElementById('output'); // معالجة ملفات الصور فقط if (!f.type.match('image.*')) { output.classList.add('alert', 'alert-danger'); output.innerHTML = ''; output.innerHTML = '<p>يجب أن يكون الملف الذي تريد تحميله صورة صالحة</p>'; return false; } else { output.classList.remove('alert', 'alert-danger'); $('#form-results').removeClass().addClass('d-none'); } var reader = new FileReader(); // الإغلاق لالتقاط معلومات الملف reader.onload = (function (file) { return function (e) { // عرض الصورة المصغرة var span = document.createElement('span'); span.innerHTML = ['<img class="img-thumbnail" src="', e.target.result, '" alt="', encodeURI(file.name), '" title="', encodeURI(file.name), '"/>'].join(''); output.innerHTML = ""; output.insertBefore(span, null); }; })(f); //"url" قراءة ملف الصورة كعنوان للبيانات reader.readAsDataURL(f); return true; } // تغيير الأيقونة داخل خانة كلمة المرور عند الضفط عليها $('.toggle-password').on('click', function () { $(this).toggleClass('fa-lighte fa-eye-slash'); const input = $($(this).data('id')); if (input.attr('type') == 'password') { input.attr('type', 'text'); } else { input.attr('type', 'password'); } }); // register/login forms $(document).on('click', '.submit-btn', function (e) { e.preventDefault(); var btn = $(this), frm = btn.parents('.form'), url = frm.attr('action'), src_avatar = frm.data('loader'), flag = false, formResults = frm.find('#form-results'); if (flag === true) { return false; } const data = new FormData(frm[0]); $.ajax({ url: url, data: data, type: 'POST', dataType: 'json', beforeSend: function () { flag = true; btn.attr('disabled', true); formResults.removeClass().addClass('alert alert-info').html('<p class="text-center"><img src="' + src_avatar + '" alt="Loading..."></p>'); }, success: function (results) { setTimeout(function () { if (results.errors) { formResults.removeClass().addClass('alert alert-danger').html(results.errors); btn.removeAttr('disabled'); flag = false; } else if (results.success) { formResults.removeClass().addClass('alert alert-success').html(results.success); } }, 1000); if (results.redirectTo) { setTimeout(function () { window.location.href = results.redirectTo; }, 4000); } }, cache: false, processData: false, contentType: false, }); }); // إن وجد AOS plugin تفعيل الـ $("div, p").each(function() { $.each(this.attributes, function() { if (this.name.indexOf('data-aos') == 0) { AOS.init({ mirror: true }); } }); }); // (tooltip) تفعيل تلميح أداة التمهيد let btns_toggle = document.querySelectorAll('[data-bs-toggle="tooltip"]'); btns_toggle.forEach(function (btn) { if(btn) { // التحقق مما إذا كان العنصر موجودًا var tooltipBtn = new bootstrap.Tooltip(btn); btn.addEventListener('mouseleave', function () { // إخفاء التلميح بشكل صريح ، لأنه بعد النقر عليه يظل مركزًا (لأنه زر) ، لذلك سيظل تلميح الأداة مرئيًا حتى يتم نقل التركيز بعيدًا tooltipBtn.hide(); }); } }); });

من هنا فصاعدا، سنهتم ببرمجة الموقع (المشروع).
وستكون الأكواد المدرجة متاحة في منتدى لغات البرمجة و تحديدا في منتدى لغة بى أتش بى بما أن البرمجة ستتم بإذن الله بهذه اللغة.

يــتــبــع

Chokri.Z · ‏1/6/2022

إضافة مجلدات و إنشاء قاعدة البيانات

قبل المرور إلى مرحلة البرمجة، نريد أن نضيف المجلدين "classes" الذي سيحتوي على الفئات ، و مجلد "vendor" الذي سيحتوي ملف التحميل التلقائي "autoload.php" وملف الإعدادات "config.php" داخل المجلد الرئيسي للمشروع.
المسار المحدد لإنشاء المجلدين: "C:/xampp/htdocs/itabcode/vendor" و "C:/xampp/htdocs/itabcode/classes"

ملف "autoload.php"

كود PHP:

<?php /* دالة التحميل التلقائي ستشمل الفئات المسبوقة باسم المساحة itabcode\classes */ spl_autoload_register(function ($class) { // بادئة مساحة الاسم $prefix = 'itabcode\\classes'; // التحقق مما إذا كانت فئة من المشروع $len = strlen($prefix); if (strncmp($prefix, $class, $len) !== 0) return; // الفئة ليست من المشروع // الحصول على اسم فئة نسبي وإزالة اسم مساحة الاسم $className = substr($class, $len); // مجلد الفئات الأساسية $baseDir = dirname(__DIR__) . '/classes/'; // parent y compris $file = $baseDir . str_replace('\\', DIRECTORY_SEPARATOR, $className) . '.php'; // إذا كان الملف موجودًا نقوم باستدعائه if (file_exists($file)) { require $file; } }); ?>

ملف "config.php"

كود PHP:

<?php return [ 'server' => 'localhost', 'dbname' => 'itabcode', 'dbuser' => 'root', 'dbpass' => '', ]; ?>

بعد إنشاء المجلدات ، الملفات ، قاعدة البيانات و تعديل ملف النمط "default.css" ، هذا مجلد المشروع في المرفقات

يــتــبــع

Chokri.Z · ‏11/6/2022

تفعيل الامتداد "dg" لدعم معالجة الصور

للقيام بذلك ، ابدأ بتشغيل الخادم "XAMPP" المحلي.
من خلال قائمة هذا الأخير ، انقر فوق علامة التبويب "config".

ستظهر قائمة منسدلة بالاختيارات ، اختر " (php.ihi)".
بعد الضغط على الخيار، سيتم فتح ملف في المحرر الافتراضي للنظام. في هذا الملف المفتوح ، ابحث عن"؛ extension = gd ". احذف "؛" الذي يقع في بداية السطر.

أعد تشغيل الخادم. مبروك تم تفعيل الإمتداد.

الصور موجودة بالمرفقات.

يــتــبــع

Chokri.Z · ‏9/6/2022

التعديل على ملف "C:/xampp/htdocs/itabcode/css/default.css"

بعدما قمنا بالتعديل على ملفات الـ PHP هنا ، هذا ملف التنسيق "default.css" المعدل

كود PHP:

@charset "UTF-8"; :root, .default-theme{ font-size: 16px; --vh: 100vh; --theme-color: 210, 87, 11; --theme-second-color: 150, 6, 247; --theme-orange: 192, 20, 245; --theme-navbar-bg-color: 33, 37, 41; --theme-navbar-link-color: 178, 204, 214; } body{ font-family: 'Open Sans', sans-serif; background-image: linear-gradient(#e8f0ff 0%, white 52.08%); color: #333; letter-spacing: 0.03ch; overflow: auto; } html[dir="rtl"] .icon::after, html[dir="rtl"] .icon::before { -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); -ms-filter: "FlipH"; filter: FlipH; } #site-navbar,.dropdown-menu{ background-color: rgb(var(--theme-navbar-bg-color)); } #site-navbar .nav-link, #site-navbar .dropdown-item{ color: rgb(var(--theme-navbar-link-color)); } #site-navbar .nav-link{ font-size: calc(100% + 2px); } #site-navbar .nav-link:hover > .icon{ color: rgb(var(--theme-color)); } #site-navbar .nav-link:hover, #site-navbar .dropdown-item:hover, #site-navbar .nav-link.active{ color: #fff !important; } #site-navbar .dropdown-item:hover{ background-color: #69657a; } #site-navbar .navbar-brand{ color: rgba(var(--theme-color),0.7); font-size: calc(100% + 18px); } #site-navbar .navbar-brand:hover{ color: rgb(var(--theme-color)); } #site-navbar .navbar-toggler { padding: 0.15rem 0.15rem; font-size: 1.16rem; line-height: 1; background-color: transparent; border: 1px solid transparent; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; } #site-navbar .navbar-toggler::before { display: block; position: absolute; color: rgb(var(--theme-navbar-link-color)); font: var(--fa-font-solid); content: "\f0c9"; text-rendering: auto; -webkit-font-smoothing: antialiased; /*https://fontawesome.com/docs/web/add-icons/pseudo-elements*/ } #site-navbar .navbar-toggler:focus { outline: none; -webkit-outline-style: none; -moz-outline-style: none; outline-style: none; -webkit-box-shadow: none; box-shadow: none; } h1, h2, h3, h4, h5, h6 { font-family: Amiri, Georgia, "Times New Roman", serif; color: rgb(var(--theme-color)); } .has-error{ border: 1px solid red !important; } .icon::before { display: inline-block; width: 1.25em; text-rendering: auto; -webkit-font-smoothing: antialiased; } .user-avatar{ color: rgb(var(--theme-navbar-link-color)); } .user-avatar:hover>span{ color: #fff; } .user-avatar>span img{ width: 34px; height: 34px; } /*---------------------- register form ------------------------*/ .form-register { width: 100%; max-width: 650px; padding: 7px; margin: 25px auto; border: 2px solid rgb(var(--theme-color)); border-radius: .4rem; } .form-contact { width: 100%; max-width: 610px; padding: 7px; margin: 34px auto; border: 2px solid rgb(var(--theme-color)); border-radius: .4rem; } .form-register .form-floating:focus-within { z-index: 2; } .form-register .small_avatar{ width: 60px; height: 60px; background-color: transparent; border-radius: 50%; } /*---------------------- login form ------------------------*/ .form-signin { width: 100%; max-width: 330px; padding: 15px; margin: 25px auto; border: 2px solid rgb(var(--theme-color)); border-radius: .4rem; } .form-signin .checkbox { font-weight: 400; } .form-signin .form-floating:focus-within { z-index: 2; } .field-icon-left { position: absolute; top: 50%; right: 15px; color: rgba(0, 0, 0, 0.3); -webkit-transform: translateY(-50%); transform: translateY(-50%); } .field-icon-right { position: absolute; top: 50%; left: 15px; color: rgba(0, 0, 0, 0.3); -webkit-transform: translateY(-50%); transform: translateY(-50%); } .gallery{ padding-bottom: 80px; } .gallery > ul { margin-bottom: 0; } .gallery > ul > li { float: left; margin-bottom: 15px; margin-right: 20px; width: 200px; } .gallery > ul > li a { border: 3px solid #FFF; border-radius: 3px; display: block; overflow: hidden; position: relative; float: left; } .gallery > ul > li a > img { -webkit-transition: -webkit-transform 0.15s ease 0s; -moz-transition: -moz-transform 0.15s ease 0s; -o-transition: -o-transform 0.15s ease 0s; transition: transform 0.15s ease 0s; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); height: 100%; width: 100%; } .gallery > ul > li a:hover > img { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); }

مجلد المشروع معدل و بالمرفقات

Chokri.Z · ‏9/6/2022

لقطات للشاشة "Screenshots"

Chokri.Z · ‏11/6/2022

بفضل الله و عونه، تم إنجاز كل المراحل بعد إتمام المرحلة الأخيرة هنا

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

في انتظار تفاعلكم ، آرائكم و تساؤلاتكم.
الكود سورس النهائ للمشروع بالمرفقات.

الحمد لله

Chokri.Z · ‏13/6/2022

مقتبس من Chokri.Z: ↑

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

سأبدأ بفتح المجال

مثلا، في نطاق حماية الموقع. سأقوم بالتعديل على مجلد المشروع، بإضافة ملف "C:/xampp/htdocs/itabcode/.htaccess" الذي سيتظمن حاليا، الحد الأدني من الحماية.

هذا الملف، هو مثال لما يمكن القيام به في إطار التحسين.
كود HTML:
#.htaccess حماية جميع ملفات الـ
<Files *.htaccess>
    Order Allow,Deny
    Deny from all
</Files>
<IfModule mod_rewrite.c>
    # منع الفهرسة
    Options -Indexes
 
    # رسالة مخصصة لخطأ 403
    ErrorDocument 403 '<html dir="rtl"><head><meta charset="utf-8"></head><body><p style="text-align: center">لا يمكنك الوصول إلى هذا المجلد</p></body></html>'
</IfModule>
مجلد المشروع وهيكل الملفات

تسجيل الدخول

إنشاء موقع بالإعتماد على إطار العمل الشهير بوتستراب (Bootstrap)

Chokri.Z مشرف موقع أكتب كود

Chokri.Z مشرف موقع أكتب كود

Chokri.Z مشرف موقع أكتب كود

Chokri.Z مشرف موقع أكتب كود

Chokri.Z مشرف موقع أكتب كود

Chokri.Z مشرف موقع أكتب كود

Chokri.Z مشرف موقع أكتب كود

Chokri.Z مشرف موقع أكتب كود

الملفات المرفقة:

itabcode.rar

Chokri.Z مشرف موقع أكتب كود

الملفات المرفقة:

itabcode.rar

Chokri.Z مشرف موقع أكتب كود

Chokri.Z مشرف موقع أكتب كود

الملفات المرفقة:

itabcode_sql.rar

Chokri.Z مشرف موقع أكتب كود

الملفات المرفقة:

captures_demo.rar

Chokri.Z مشرف موقع أكتب كود

الملفات المرفقة:

itabcode.rar

Chokri.Z مشرف موقع أكتب كود

Chokri.Z مشرف موقع أكتب كود

الملفات المرفقة:

itabcode.rar

itabcode_sql.rar

Chokri.Z مشرف موقع أكتب كود

أكواد خاصة بالمشروع: إنشاء موقع بالإعتماد على إطار العمل الشهير بوتستراب

كيفية إنشاء شريط تنقل "navbar" مخصص

كيفية إنشاء صورة ملف شخصي من خلال الإسم و اللقب

طريقة وخطوات إنشاء حملة تسويقية ناجحة على إعلانات جوجل Google Ads

الطريقة الصحيحة لإنشاء بوت تواصل ببرنامج التليجرام | خطوة بخطوة

تسجيل الدخول

إنشاء موقع بالإعتماد على إطار العمل الشهير بوتستراب (Bootstrap)

Chokri.Z مشرف موقع أكتب كود

Chokri.Z مشرف موقع أكتب كود

Chokri.Z مشرف موقع أكتب كود

Chokri.Z مشرف موقع أكتب كود

Chokri.Z مشرف موقع أكتب كود

Chokri.Z مشرف موقع أكتب كود

Chokri.Z مشرف موقع أكتب كود

Chokri.Z مشرف موقع أكتب كود

الملفات المرفقة:

itabcode.rar

Chokri.Z مشرف موقع أكتب كود

الملفات المرفقة:

itabcode.rar

Chokri.Z مشرف موقع أكتب كود

Chokri.Z مشرف موقع أكتب كود

الملفات المرفقة:

itabcode_sql.rar

Chokri.Z مشرف موقع أكتب كود

الملفات المرفقة:

captures_demo.rar

Chokri.Z مشرف موقع أكتب كود

الملفات المرفقة:

itabcode.rar

Chokri.Z مشرف موقع أكتب كود

Chokri.Z مشرف موقع أكتب كود

الملفات المرفقة:

itabcode.rar

itabcode_sql.rar

Chokri.Z مشرف موقع أكتب كود

أكواد خاصة بالمشروع: إنشاء موقع بالإعتماد على إطار العمل الشهير بوتستراب

كيفية إنشاء شريط تنقل "navbar" مخصص

كيفية إنشاء صورة ملف شخصي من خلال الإسم و اللقب

طريقة وخطوات إنشاء حملة تسويقية ناجحة على إعلانات جوجل Google Ads

الطريقة الصحيحة لإنشاء بوت تواصل ببرنامج التليجرام | خطوة بخطوة

عمليات بحث مفيدة