كيفاش نصاوب واجهة على شكل موقع التواصل الإجتماعي فيسبوك الجزء الثاني


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

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

- الملف index.php

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

                                  <?php include("includes/main.php");?>
  <body>
    <?php include("includes/header.php");?>
    <?php include("includes/navigation.php");?>
    <section>
          <div class="container">
              <div class="row">
                  <div class="col-md-8">
                    <div class="panel panel-default">
                        <div class="panel-heading">Wall</div>
                          <div class="panel-body">
                        <form action="">
                                <div class="form-group">
                                    <textarea name="" id="" class="form-control" placeholder="Write on the wall"></textarea>
                                </div>
                                <button type="submit" class="btn btn-default">Publier</button><br>
                                <div class="pull-right">
                                  <div class="btn-group">
                                    <button type="button" class="btn btn-default"><i class="fa fa-pencil"></i>Text</button>
                                    <button type="button" class="btn btn-default"><i class="fa fa-image"></i>Photo</button>
                                    <button type="button" class="btn btn-default"><i class="fa fa-file-video-o"></i>video</button>
                                  </div>
                               </div>
                          </div>
                        </form>
                    </div>
                    <div class="panel panel-default post">
                        <div class="panel-body">
                          <div class="row">
                              <div class="col-sm-2">
                                 <a href="profile.html" class="post-avatar thumbnail"><img src="images/user.png" alt=""><div class="text-center">DevUser</div></a>
                                 <div class="likes text-center">7 j'aime</div>
                              </div>
                              <div class="col-sm-10">
                                 <div class="bubble">
                                     <div class="pointer">
                                         <p>
                                           "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                                         </p>
                                     </div>
                                     <div class="pointer-border"></div>
                                 </div><!-- end bubble -->
                                 <p class="post-actions"><a href="#">Commenter</a>-<a href="#">j'aime</a>-<a href="#">Suivre</a>-<a href="#">Partager</a></p>
                                 <div class="comment-form">
                                    <form action="" class="form-inline">
                                        <div class="form-group">
                                            <input type="text" class="form-control" id="" placeholder="Entrer votre commentaire">
                                        </div>
                                        <button type="submit" name="button" class="btn btn-submit">Ajouter</button>
                                    </form>
                                 </div><!-- end comment-form-->
                                 <div class="clearfix"></div>
                                 <div class="comments">
                                   <div class="comment">
                                       <a href="#" class="comment-avatar pull-left"><img src="images/user.png" alt=""></a>
                                       <div class="comment-text">
                                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
                                       </div>
                                   </div>
                                   <div class="clearfix"></div>
                                 </div>
                              </div>
                          </div>
                        </div>
                    </div>
                    <div class="panel panel-default post">
                        <div class="panel-body">
                          <div class="row">
                              <div class="col-sm-2">
                                 <a href="profile.html" class="post-avatar thumbnail"><img src="images/user.png" alt=""><div class="text-center">DevUser</div></a>
                                 <div class="likes text-center">7 j'aime</div>
                              </div>
                              <div class="col-sm-10">
                                 <div class="bubble">
                                     <div class="pointer">
                                         <p>
                                           "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                                         </p>
                                     </div>
                                     <div class="pointer-border"></div>
                                 </div><!-- end bubble -->
                                 <p class="post-actions"><a href="#">Commenter</a>-<a href="#">J'aime</a>-<a href="#">Suivre</a>-<a href="#">Partager</a></p>
                                 <div class="comment-form">
                                    <form action="" class="form-inline">
                                        <div class="form-group">
                                            <input type="text" class="form-control" id="" placeholder="Entrer votre commentaire">
                                        </div>
                                        <button type="submit" name="button" class="btn btn-submit">Ajouter</button>
                                    </form>
                                 </div><!-- end comment-form-->
                                 <div class="clearfix"></div>
                                 <div class="comments">
                                   <div class="comment">
                                       <a href="#" class="comment-avatar pull-left"><img src="images/user.png" alt=""></a>
                                       <div class="comment-text">
                                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
                                       </div>
                                   </div>
                                   <div class="clearfix"></div>
                                 </div>
                              </div>
                          </div>
                        </div>
                    </div>
                    <div class="panel panel-default post">
                        <div class="panel-body">
                          <div class="row">
                              <div class="col-sm-2">
                                 <a href="profile.html" class="post-avatar thumbnail"><img src="images/user.png" alt=""><div class="text-center">DevUser</div></a>
                                 <div class="likes text-center">7 J'aime</div>
                              </div>
                              <div class="col-sm-10">
                                 <div class="bubble">
                                     <div class="pointer">
                                         <p>
                                           "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                                         </p>
                                     </div>
                                     <div class="pointer-border"></div>
                                 </div><!-- end bubble -->
                                 <p class="post-actions"><a href="#">Commenter</a>-<a href="#">J'aime</a>-<a href="#">Suivre</a>-<a href="#">Partager</a></p>
                                 <div class="comment-form">
                                    <form action="" class="form-inline">
                                        <div class="form-group">
                                            <input type="text" class="form-control" id="" placeholder="Entrer votre commentaire">
                                        </div>
                                        <button type="submit" name="button" class="btn btn-submit">Ajouter</button>
                                    </form>
                                 </div><!-- end comment-form-->
                                 <div class="clearfix"></div>
                                 <div class="comments">
                                   <div class="comment">
                                       <a href="#" class="comment-avatar pull-left"><img src="images/user.png" alt=""></a>
                                       <div class="comment-text">
                                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
                                       </div>
                                   </div>
                                   <div class="clearfix"></div>
                                 </div>
                              </div>
                          </div>
                        </div>
                    </div>
                  </div><!-- col-md-8 end-->
                  <?php include("includes/sidebar.php");?>
              </div>
          </div>
    </section>
    <?php include("includes/footer.php");?>
   

                            

- الملف groups.php

هاد الملف هو الصفحة لي كتضمن المجموعات لي كاينين فالموقع ولي المستخدم يمكنلو ينضم ليها الكود ديالو هو :

                                  <?php include("includes/main.php");?>
  <body>
    <?php include("includes/header.php");?>
    <?php include("includes/navigation.php");?>
  <section>
  <div class="container">
      <div class="row">
          <div class="col-md-8">
            <div class="groups">
                <h1 class="page-header">Groupes</h1>
                <div class="group-item">
                   <img src="images/groupe.jpg" alt="">
                   <h4><a href="#">Exemple Groupe 1</a></h4>
                   <p>Amis groupe</p>
                   <p><a href="#" class="btn btn-default">Join the group</a></p>
                </div>
                <div class="group-item">
                   <img src="images/groupe.jpg" alt="">
                   <h4><a href="#">Exemple Groupe 2</a></h4>
                   <p>Amis groupe</p>
                   <p><a href="#" class="btn btn-default">Join the group</a></p>
                </div>
                <div class="group-item">
                   <img src="images/groupe.jpg" alt="">
                    <h4><a href="#">Exemple Groupe 3</a></h4>
                   <p>Amis groupe</p>
                   <p><a href="#" class="btn btn-default">Join the group</a></p>
                </div>
                <div class="group-item">
                   <img src="images/groupe.jpg" alt="">
                   <h4><a href="#">Exemple Groupe 4</a></h4>
                   <p>Amis groupe</p>
                   <p><a href="#" class="btn btn-default">Join the group</a></p>
                </div>
            </div>
          </div><!-- col-md-8 end-->
          <?php include("includes/sidebar.php");?>
      </div>
  </div>
</section>
<?php include("includes/footer.php");?>

                            

- الملف members.php

هاد الملف هو الصفحة لي كتضمن الأعضاء لي كاينين فالموقع ولي المستخدم يمكنلو يرسلهم رسالة أو يزيدهم للائحة الأصدقاء كما يمكنلو يزور البروفايل ديالهم الكود ديالو هو :

                                  <?php include("includes/main.php");?>
  <body>
    <?php include("includes/header.php");?>
    <?php include("includes/navigation.php");?>
    <section>
          <div class="container">
              <div class="row">
                  <div class="col-md-8">
                      <div class="members">
                          <h1 class="page-header">Membres</h1>
                          <div class="row member-row">
                              <div class="col-md-3">
                                  <img src="images/user.png" class="img-thumbnail" alt="">
                                  <div class="text-center">Utilisateur 1</div>
                              </div>
                              <div class="col-md-3">
                                  <p><a href="#" class="btn btn-success btn-block"><i class="fa fa-users"></i>Demande d'amitie</a></p>
                              </div>
                              <div class="col-md-3">
                                  <p><a href="#" class="btn btn-default btn-block"><i class="fa fa-envelope"></i>Envoyer un message</a></p>
                              </div>
                              <div class="col-md-3">
                                  <p><a href="#" class="btn btn-primary btn-block"><i class="fa fa-users"></i>Voir le Profile</a></p>
                              </div>
                          </div>
                           <div class="row member-row">
                              <div class="col-md-3">
                                  <img src="images/user.png" class="img-thumbnail" alt="">
                                  <div class="text-center">Utilisateur 1</div>
                              </div>
                              <div class="col-md-3">
                                  <p><a href="#" class="btn btn-success btn-block"><i class="fa fa-users"></i>Demande d'amitie</a></p>
                              </div>
                              <div class="col-md-3">
                                  <p><a href="#" class="btn btn-default btn-block"><i class="fa fa-envelope"></i>Envoyer un message</a></p>
                              </div>
                              <div class="col-md-3">
                                  <p><a href="#" class="btn btn-primary btn-block"><i class="fa fa-users"></i>Voir le Profile</a></p>
                              </div>
                           </div>
                           <div class="row member-row">
                              <div class="col-md-3">
                                  <img src="images/user.png" class="img-thumbnail" alt="">
                                  <div class="text-center">Utilisateur 1</div>
                              </div>
                              <div class="col-md-3">
                                  <p><a href="#" class="btn btn-success btn-block"><i class="fa fa-users"></i>Demande d'amitie</a></p>
                              </div>
                              <div class="col-md-3">
                                  <p><a href="#" class="btn btn-default btn-block"><i class="fa fa-envelope"></i>Envoyer un message</a></p>
                              </div>
                              <div class="col-md-3">
                                  <p><a href="#" class="btn btn-primary btn-block"><i class="fa fa-users"></i>Voir le Profile</a></p>
                              </div>
                          </div>
                      </div>
                  </div><!-- col-md-8 end-->
                  <?php include("includes/sidebar.php");?>
              </div>
          </div>
    </section>
  </body>
  <?php include("includes/footer.php");?>
                            

- الملف photos.php

هاد الملف هو الصفحة لي كتضمن الصور لي كاينين فالموقع ولي المستخدم يمكنلو يعرضهم فواحد النافذة لي كتفتح بالضغط على كل صورة الكود ديالو هو :

                                    <?php include("includes/main.php");?>
<body>
<?php include("includes/header.php");?>
<?php include("includes/navigation.php");?>
<section>
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="page-header">Photos</div>
<ul class="photos gallery-parent">
<li><a href="images/sample (1).jpg" data-toggle="lightbox" data-title="image one" data-gallery="mygallery" data-parent=".gallery-parent"><img src="images/sample (1).jpg" alt="" class="thumbnail"></a></li>
<li><a href="images/sample (2).jpg" data-toggle="lightbox" data-title="image one" data-gallery="mygallery" data-parent=".gallery-parent"><img src="images/sample (2).jpg" alt="" class="thumbnail"></a>
</li>
<li><a href="images/sample (3).jpg" data-toggle="lightbox" data-title="image one" data-gallery="mygallery" data-parent=".gallery-parent"><img src="images/sample (3).jpg" alt="" class="thumbnail"></a></li>
<li><a href="images/sample (4).jpg" data-toggle="lightbox" data-title="image one" data-gallery="mygallery" data-parent=".gallery-parent"><img src="images/sample (4).jpg" alt="" class="thumbnail"></a></li>
<li><a href="images/sample (5).jpg" data-toggle="lightbox" data-title="image one" data-gallery="mygallery" data-parent=".gallery-parent"><img src="images/sample (5).jpg" alt="" class="thumbnail"></a></li>
</ul>
</div><!-- col-md-8 end-->
<?php include("includes/sidebar.php");?>
</div>
</div>
</section>
</body>
<?php include("includes/footer.php");?>
                                

- الملف profile.php

هاد الملف هو الصفحة لي كتضمن المعلومات الخاصة بالمستخدم أي البروفايل الكود ديالو هو :

                                      <?php include("includes/main.php");?>
  <body>
  <?php include("includes/header.php");?>
  <?php include("includes/navigation.php");?>
    <section>
          <div class="container">
              <div class="row">
                  <div class="col-md-8">
                      <div class="profile">
                        <h1 class="page-header">Profile</h1>
                        <div class="row">
                            <div class="col-md-4">
                                <img src="images/user.png" height="150" width="150" alt="">
                            </div>
                            <div class="col-md-4">
                               <ul class="pull-right">
                                  <li><strong>Nom:</strong></li>
                                  <li><strong>Email:</strong></li>
                                  <li><strong>Ville:</strong></li>
                                  <li><strong>Sexe:</strong></li>
                                  <li><strong>Profession:</strong></li>
                               </ul>
                            </div>
                        </div>
                      </div>
                  </div><!-- col-md-8 end-->
                  <?php include("includes/sidebar.php");?>
              </div>
          </div>
    </section>
    <?php include("includes/footer.php");?>
   

                                


بحث في الموقع


إشترك للتوصل بالجديد