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

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

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


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


- الملف index.php

أول حاجة غادي نزيدو ملف نسميوه index.php لي غادي يكون الملف الرئيسي لي غادي يعرض الصور لي عندنا فقاعدة البيانات بالإضافة لform لي غادي تمكن من البحث عن صورة معينة الصور غادي يكون عندها رابط كيوجه لملف آخر غادي نزيدوه كيمكن من عرض المعلومات الخاصة بالصورة لي ظغط عليها الزائر الكود ديال الملف :

                                                    
                                                        <?php include "includes/header.php";?>
<?php include "includes/navigation.php";?>
<?php 
$page = !empty($_GET['page']) ? (int)$_GET['page'] : 1;
$item_per_page = 4;
$item_count_all = Photo::count_all(); 
$paginate = new Pagination($page,$item_per_page,$item_count_all);
$sql = "SELECT * FROM photos LIMIT {$item_per_page} OFFSET {$paginate->offset()}";
$photos = Photo::find_this_query($sql);
?>
<div class="container">
    <div class="row">
        <div class="col-md-9">
            <div class="row">
                <div class="col-md-9">
                    <div class="row">
                        <?php foreach($photos as $photo):?>
                            <div class="col-md-3">
                                <div class="thumbnail">
                                    <a href="photos.php?id=<?php echo $photo->id;?>"><img class="img-responsive image-shown" src="admin/<?php echo $photo->picture_path();?>"></a>     
                                </div>
                            </div>
                        <?php endforeach;?>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-9">
                    <ul class="pager">
                        <?php if($paginate->page_total() > 1):?>
                        <?php if($paginate->hasNext()):?>
                            <li class="next"><a href="index.php?page=<?php echo $paginate->next();?>">Suivant</a></li>
                        <?php endif;?>
                        <?php for($i = 1;$i <= $paginate->page_total();$i++):?>
                            <?php if($i == $paginate->current_page):?>
                                <li class="active"><a href="index.php?page=<?php echo $i;?>"><?php echo $i;?></a></li>
                            <?php else:?>
                                <li><a href="index.php?page=<?php echo $i;?>"><?php echo $i;?></a></li>
                            <?php endif;?>
                        <?php endfor;?>
                        <?php if($paginate->hasPrevious()):?>
                            <li class="previous"><a href="index.php?page=<?php echo $paginate->previous();?>">Précedent</a></li>
                        <?php endif;?>
                        <?php endif;?>
                    </ul>
                </div>
            </div>
        </div>
        <?php include("includes/sidebar.php");?>
    </div>
</div>
<?php include "includes/footer.php";?>
                                                    
                                                

- الملف photos.php

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

                                                        
                                                            <?php include "includes/header.php";?>
<?php include "includes/navigation.php";?>
<?php require_once "admin/includes/init.php";?>
<?php include "admin/includes/photo_modal.php";?>
<?php
$message = "";
if(!empty($_GET['id'])){
    $photo = Photo::find_by_id($_GET['id']);
    if(isset($_POST['submit'])){
        $comment = trim($_POST['comment']);
        $comment_create = Comment::create_comment($photo->id,$_SESSION['user_id'],$comment);
        if($comment_create && $comment_create->save()){
            redirect("photos.php?id={$photo->id}");
        }else{
            $message = "Erreur lors de l'ajout de votre commentaire";
        }
    }
}else{
redirect("index.php");
}
$comments =  Comment::find_photo_comments($_GET['id']);
//print_r($comments);
//die();
?>
<div class="container">
    <div class="row">
        <div class="col-md-7">
              <div class="panel panel-primary">
                <div class="panel-heading padded"><h3 id="title"><?php echo $photo->title;?></h3></div>
                <h4 class="padded text-primary">By Belasri</h4>
                <hr>
                <small class="padded text-danger">Posted On 20-12-2016 à 10:20:66</small>
                <div class="panel-body">
                    <a href="" data-toggle="modal" data-target="#photo-modal">
                       <img src="admin/<?php echo $photo->picture_path();?>" id="img" class="thumbnail img-responsive padded" style="margin:auto;" alt="">
                    </a>
                    <div class="lead padded">
                       <p class="lead" id="description"><?php echo $photo->description;?></p>
                    </div>
                    <div class="">
                        <form action="" method="post" class="form-vertical padded">
                            <div class="form-group">
                                <textarea name="comment" cols="30" rows="10" class="form-control" required=""></textarea>
                            </div>
                            <div class="form-group">
                                <input type="submit" name="submit" value="Commenter" class="btn btn-success">
                            </div>
                        </form>
                    </div>
                    <div class>
                    <?php if($comments != null):?>
                        <hr>
                          <p class="lead">Commentaires <span class="badge"><?php echo count($comments);?></span></p>
                        <hr>
                        <?php foreach($comments as $comment):
                            $user = User::find_by_id($comment->user_id);?>
                            <div class="media">
                                <div class="pull-left">
                                    <img src="admin/images/<?php echo $user->filename;?>" alt="" height="62" width="62" class="media-object">
                                </div>
                                <div class="media-body">
                                    <h4 class="media-heading">
                                        <?php echo $user->pseudo." :";?>
                                        <?php echo $comment->comment." le:";?>
                                        <small><?php echo $comment->date;?></small>
                                    </h4>
                                </div>
                            </div>
                        <?php endforeach;?>
                    <?php else:?>
                          <p class="lead">Commentaires <span class="badge">0</span></p>
                    <?php endif; ?>
                    </div>
                </div> 
              </div>
        </div>
        <?php include "includes/sidebar.php";?>
    </div>
</div>
<?php include "includes/footer.php";?>
                                                        
                                                    

- الملف photo_modal.php

فالمجلد admin/includes غادي نزيد ملف نسميه photo_modal.php لي غادي يمكن من عرض الصور لي عندنا فقاعدة البيانات من بعد ما يضغط الزائر على صورة فالملفphotos.php ولي غادي يعطيه إمكانية اختيار صورة أخرى وعرضها الكود ديالو هو :

                                                        
                                                            <?php
$photos = Photo::get_all();
?>
<div class="modal fade" tabindex="-1" role="dialog" id="photo-modal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
                <div class="row"> 
                    <div class="col-md-8">
                        <div class="row">
                            <?php foreach($photos as $photo):?>
                                <div class="col-md-3 modal_tumbnails" data-id="<?php echo $photo->id;?>" data-name="<?php echo $photo->filename;?>">
                                    <img src="admin/<?php echo $photo->picture_path();?>" class="thumbnail img-responsive" id="img">
                                </div>
                            <?php endforeach;?>
                        </div>
                    </div>
                    <div class="col-md-3 col-md-offset-1">
                        <div class="" id="result">
                        
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" disabled="true" id="submit">Valider la séléction</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
                                                        
                                                    

- الملف search.php

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

                                                        
                                                            <?php include "includes/header.php";?>
<?php include "includes/navigation.php";?>
<?php 
$alias = trim($_POST['alias']);
$page = !empty($_GET['page']) ? (int)$_GET['page'] : 1;
$item_per_page = 4;
$item_count_all = Photo::count_all(); 
$paginate = new Pagination($page,$item_per_page,$item_count_all);
$sql = "SELECT * FROM photos WHERE title LIKE '%{$alias}%'";
$photos = Photo::find_this_query($sql);
?>
<div class="container">
    <div class="row">
        <div class="col-md-9">
            <div class="row">
                <div class="col-md-9">
                    <div class="row">
                        <?php foreach($photos as $photo):?>
                            <div class="col-md-3">
                                <div class="thumbnail">
                                    <a href="photos.php?id=<?php echo $photo->id;?>"><img class="img-responsive image-shown" src="admin/<?php echo $photo->picture_path();?>"></a>     
                                </div>
                            </div>
                        <?php endforeach;?>
                    </div>
                </div>
            </div>
        </div>
        <?php include("includes/sidebar.php");?>
    </div>
</div>
<?php include "includes/footer.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 الجزء السادس

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


PH

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

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