مشروع Photos Gallery بل PHP الجزء السابع

منذ 5 سنوات imadbelasri PHP
PH

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


نظرة سريعة بالفيديو


- الملف header.php

فالمجلد الرئيسي PhotoGalleryOPP غادي تزيد 4 ديال المجلدات css و js و includes و fonts غادي تزيد المجلد font-awsome لي حملنا فالمجلد الرئيسي وغادي تزيد الملف bootstrap.min.css ف css والملف bootstrap.min.js ف js و الملفات لي حملنا فالمجلد fonts ف fonts من بعد غادي تزيد ملف تسميه header.php و آخر تسميه footer.php وآخر تسميه navigation.php و sidebar.php تزيدهم فincludes الكود ديال header.php هو :

                                                    
                                                        <?php 
require_once('admin/includes/init.php');
?>
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Photo Gallery</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">
    <link href="font-awsome/css/font-awesome.css" rel="stylesheet">
  </head>
  <body>
 


                                                    
                                                

- الملف footer.php

هاد الملف غادي يكون هو الأساس ديال كل الصفحات الخاصة بجهة الزوار ولي غادي يربط ملفات js بالملفات ديالنا.

                                                        
                                                            <footer>
      <p>© 2016 Darija Coding</p>
</footer>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="admin/js/scripts.js"></script>
  </body>
</html>
                                                        
                                                    

- الملف navigation.php

هاد الملف غادي تكون فيه القائمة لي غادي تمكن من تصفح جميع الصفحات.

                                                        
                                                              <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand">Photo Gallery Project</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="index.php">Acceuil</a></li>
            <li><a href="admin/index.php">Admin</a></li>
          </ul>
        </div>
      </div>
    </nav>
                                                        
                                                    

- الملف sidebar.php

هاد الملف غادي يكون فيه واحد لformulaire لي كيمكن من البحث عن صورة والتوجيه نحو الملف المسؤول ن عرض الصور الكود ديالو هو :

                                                        
                                                            <div class="col-md-3">
    <div class="panel panel-default">
        <div class="panel-heading search-box-heading">Recherche <span id="toggle" class="fa fa-chevron-up pull-right"></span></div>
        <div class="panel-body search-box">
            <form action="search.php" method="post">
                <div class="form-group">
                    <input type="text" name="alias" placeholder="Nom de photo" required="" class="form-control">
                </div>
                <button type="submit" class="btn btn-success pull-right"><span class="fa fa-search"></span></button>
            </form>
        </div>
    </div>
</div><!--/.sidebar-offcanvas-->
                                                        
                                                    

main.css

فالمجلد css كنزيد ملف كنسميه main.php هاد الملف غادي يمكن من إضافة بعض التعديلات للصفحة الرئيسية الكود ديال الملف هو:

                                                        
                                                            body{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin:100px;
}
footer{
     margin-top:100px;
}
.picture_links span a{
    text-decoration: none;
    color:#FFF;
}
.padded{
    padding: 10px;
}
img.image-shown{
  width:300px;
  height:150px !important;
}
img.image-shown:hover{
  opacity: 0.8;
}
ul.pager li.active a{
    background-color: blue;
    color:#FFF;
}
.modal-dialog{
    width: 90% !important;
}
.modal_tumbnails img{
    height:150px !important;
    width:200px;
}
.selected{
    opacity: 0.8; 
}
                                                        
                                                    

دروس ذات صلة

PH

مشروع Photos Gallery بل PHP الجزء الأول

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


PH

مشروع Photos Gallery بل PHP الجزء الثاني

فهاد الجزء الثاني غادي نقادو الملفات لي غادي يمكننا من ربط الإتصال بقاعدة البيانات وغادي نزيدو الملف...


PH

مشروع Photos Gallery بل PHP الجزء الثالث

فهاد الجزء الثالث من المشروع ديالنا غادي نكملو الملفات لي غادي يمكنو من التعامل مع المعلومات الخاصة...


PH

مشروع Photos Gallery بل PHP الجزء الرابع

فهاد الجزء الرابع من هاد المشروع غادي نكملو الملفات لي غادي يمكنو المستخدم من التسجيل وأيضا من تسجيل...


PH

مشروع Photos Gallery بل PHP الجزء الخامس

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


PH

مشروع Photos Gallery بل PHP الجزء السادس

فهاد الجزء من المشروع ديالنا غادي نزيدو الملفات الخاصة بعرض الصور لي عندنا فقاعدة البيانات والتعليقا...


PH

مشروع Photos Gallery بل PHP الجزء الثامن

فهاد الجزء الثامن والأخير من هاد المشروع غادي نزيدو الملفات لي غادي تمكن من عرض الصور وعرض صورة والم...