index.php 2行目 データベースに接続するファイルを読み込む 4行目-25行目 インポート結果を表示させるPHPプログラムコード $_GET['status']をIF関数判定して空でなければ、SWITCH関数にてインポート処理結果を変数へ代入 インポートを行った場合、必ず変数へ代入される。 switch関数による値の切り替え 表示させるメッセージ変数 : $statusMsg divクラスに代入する値により色を変えるための変数 : $statusType 45行目にメッセージを表示する 77行目-92行目 birdsテーブルをSELECT文クエリー、件数が0より多ければWHILE文を処理をして一件ずつ最終列までテーブルのタグ内に変数を代入する 、「件数が0ならデータが見つかりません」と表示する。

style.css

h2{
    align-items: center;
    text-align: center;
}
h4{
    border-bottom:20px solid black;
    padding: 10px 0;
}
img{
    padding: 20px 0;
    max-width: 850px;
}
form{
    width: 850px;
    margin: 20px auto;
    padding: 10px;
    border: .1px solid #c0c0c0;   
}
.selectbox {
    display: block;
    justify-content: center;
    align-items: center;
    width: 350px;
    margin:0 auto;
    border-radius: 5px;
    color: #2589d0;
    font-size: 1.1em;
}
.selectbox select {
    border: 1px solid #2589d0;
    border-radius: 3px;
    background-color: #fff;
    color: #2589d0;
    font-size: 1em;
    width: 100%;
    padding: 12px 20px;
    display: inline-block;
}
input[type=file], input[type=submit]{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 350px;
    margin:0 auto;
    padding: .9em 2em;
    border: 1px solid #2589d0;
    border-radius: 5px;
    background-color: #fff;
    color: #2589d0;
    font-size: 1em;
}
input[type=file]{
    width: 400px;
}
input[type=submit]{
    background: #2589d0;
    color: #eee;
    margin: 10px auto;
}
.resize-img{
    width: 820px;
    margin: 0 auto;
}
form p{
    text-align: center;
    align-items: center;
    color: red;
}

index.php