[jQuery + php] 簡易ソートアプリ作成してみた（デザイン込）

18654 ワード
jQuery デザイン PHP Design PHP テキストリンク

簡易的なアイテムソートできるアプリを実装してみましたので
記録しておきます。

成果物

ファーストビュー

ソートビュー

コア機能

○フィルターソート機能（jQuery）
|- カテゴリーボタンを押したらカテゴリーのアイテムのみ表示

○一部php化（v5.6）
|- 簡易アプリなのでデータベースは使用なし
|- データベースを利用してもできる形にしているつもりです（問題あったらこちらの記事下にリプください）

データダウンロード

こちらにパッケージ化してありますので、
下記コマンドでクローンし「/php_app/filter_search_php/」のフォルダを
Xamppまたはphpを動かせる場所に入れてください。

$　git clone https://[email protected]/d-mori-570415/webdesigntemplate.git

jQueryでフィルターソート実装/phpアプリ化

もともと作成していたWebデザインをベースに実装しています。
データはphp上で記述し、データベースは使っていません。
本来はデータベースを作成し、そちらからデータを取るようにしてください。

※コアな部分しか明記しませんので、ダウンロードして見てください。

php
<?php
    /* db設計(Laravelの場合、id、timestampは自動で生成されるので省略)
        * title
        * comment
        * category
        * image
    */
    $listItems = [
        [ 'title'=>'food1', 'comment'=>'これはfood1の画像です', 'category'=>'food', 'image'=>'ph1.jpg' ],
        [ 'title'=>'food2', 'comment'=>'これはfood2の画像です', 'category'=>'food', 'image'=>'ph2.jpg' ],
        [ 'title'=>'view1', 'comment'=>'これはview1の画像です', 'category'=>'view', 'image'=>'ph3.jpg' ],
        [ 'title'=>'view2', 'comment'=>'これはview2の画像です', 'category'=>'view', 'image'=>'ph4.jpg' ],
        [ 'title'=>'sweets1', 'comment'=>'これはsweets1の画像です', 'category'=>'sweets', 'image'=>'ph5.jpg' ],
        [ 'title'=>'sweets2', 'comment'=>'これはsweets2の画像です', 'category'=>'sweets', 'image'=>'ph6.jpg' ],
    ];

    // アイテムの合計数を取得
    $allListItemsCount = count($listItems);
?>

<!DOCTYPE HTML>
<html lang="ja">
<head>
<!--省略-->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="./js/jquery.min.js"></script>
<!--省略-->
</head>
<body>
<div class="container">
        <div class="header">
            <ul>
                <li><a href="">Work</a></li>
                <li><a href="">About</a></li>
                <li><a href="">Contact</a></li>
            </ul>
            <div class="logo"><a href="">DesignWorks<span>®️</span></a></div>
        </div>

        <div class="navi">
            <h1>Work: <?= $allListItemsCount; ?></h1>
            <ul class="filter-button">
                <li><a href="" class="allItem">ALL</a></li>
                <li><a href="javascript:void(0)" class="food">FOOD</a></li>
                <li><a href="javascript:void(0)" class="view">VIEW</a></li>
                <li><a href="javascript:void(0)" class="sweets">SWEETS</a></li>
            </ul>
        </div>

        <div class="contents">
            <div class="items filter-list">
                <?php foreach ($listItems as $listItem): ?>
                <div class="item <?= $listItem['category']; ?>">
                    <img src="./img/<?= $listItem['image']; ?>">
                    <a href="">
                        <div class="mask">
                            <div class="caption">
                                <div class="caption-title"><?= $listItem['title']; ?></div>
                                <div class="caption-content"><?= $listItem['comment']; ?></div>
                            </div>
                        </div>
                    </a>
                </div>
                <?php endforeach; ?>
            </div>  
        </div>

        <div class="footer">
            <p>Copyright© 2019 Sample Example All rights reserved.</p>
        </div>
    </div>
<script>
          $(function(){
            // filter
            let setFilter = $('.filter-button'),
                filterBtn = setFilter.find('a'),
                setList = $('.filter-list'),
                filterList = setList.find('.item'),
                listWidth = filterList.outerWidth();

            filterBtn.on('click', function(){
                if(!($(this).hasClass('active'))){
                    let filterClass = $(this).attr('class');
                    filterList.each(function(){
                        if($(this).hasClass(filterClass)){
                            $(this).css({ display: 'block' })
                                .stop().animate({ width: listWidth }, 100);
                            $(this).find('*').stop().animate({ opacity: '1' }, 100);
                        } else {
                            $(this).find('*').stop().animate({ opacity: '0' }, 100);
                            $(this).stop().animate({ width: '0' }, 100, function(){
                                $(this).css({ display: 'none' });
                            });
                        }
                    });
                    filterBtn.removeClass('active');
                    $(this).addClass('active');
                }
            });
          });
</script>
</body>
</html>