PHP Ziyaretçi Defteri 2 – Panel Arayüzünün Oluşturulması

Merhaba,

Bu derste mesajlarımızın düşeceği yönetim panelinin içerisindeki tabloyu oluşturuyoruz. Yine çok fazla anlatılacak bir şey olmadığı için bu derste de sadece kodları vereceğim. Aşağıda verdiğim kodlarla admin.php dosyasını oluşturun.

Hemen tablomuzu oluşturalım.

<table class="mesajlar">
    <h4 class="baslik">Mesajlar</h4>
    <thead>
        <tr>
            <td>ID</td>
            <td>Ad Soyad</td>
            <td>Email</td>
            <td>Mesaj İçeriği</td>
            <td>Tarih</td>
            <td>İşlemler</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Mustafa Zahid Efe</td>
            <td>mail@mail.com</td>
            <td>Mesaj İçeriği Buraya.</td>
            <td>15-09-2016 18:40</td>
            <td>
                <a href="#"><img src="sil.png" alt="Sil"></a>
                <a href="#"><img src="yanitla.png" alt="Yanıtla"></td>
        </tr>
    </tbody>
</table>

Tablomuz aynen bu şekilde olacak. Tablo içerisindeki sil ve yanıtla resimlerini aşağıdaki adreslerden indirebilirsiniz.

https://www.iconfinder.com/icons/1370026/bin_delete_remove_trash_trash_bin_trash_can_icon#size=128
https://www.iconfinder.com/icons/226602/reply_icon#size=128

Tablomuzu oluşturduğumuza göre şimdi tablomuzun CSS kodlarını yazıp biraz daha güzel görünmesini sağlayabiliriz.

body {
    font-size:14px;
    font-family:Arial;
    color:#333;
}
table.mesajlar {
    width:820px;
    margin:15px auto;
}

h4.baslik {
    display:block;
    text-align:center;
    margin-top:100px;
    margin-bottom:0px;
    font-size:20px;
}

table.mesajlar td {
    border:1px solid #ddd;
    padding:10px;
    text-align:center;
}

table.mesajlar img {
    width:24px;
    height:24px;
}

Şimdi tüm sistemimizde ufak bir değişiklik yapacağız. Ana dizinimizde style.css adında bir dosya oluşturalım ve index.php ve admin.php içerisine yazdığımız tüm CSS kodlarımızı oraya atalım. Tabi bu işlemden sonra style.css dosyamızı iki sayfamızda da çağırmayı unutmayalım. Sayfaların head etiketleri arasına şu satırı ekleyelim.

<link rel="stylesheet" href="style.css">

Tabi yönetim panelimiz varsa bir de giriş sayfasına ihtiyacımı olacak. Bunun için index.php dosyamızdaki formumuzu aynen kopyalayıp admin.php dosyamızın içerisine yapıştırıyoruz. Daha sonra da giriş işlemi için daha uygun hale getiriyoruz. Formumuz şu şekilde olacak.

<form class="ziyaretci_form" action="" method="post">
    <h4>Ziyaretçi Defteri</h4>
    <label>
        <span>Kullanıcı Adı</span>
        <input type="text" name="kadi">
    <label>
    <label>
        <span>Şifre</span>
        <input type="password" name="sifre">
    <label>
    <label>
        <button type="submit" class="submit_btn">Giriş Yap</button>
    <label>
</form>

Bu işlemlerden sonra tek yapmamız gereken şey bir adet de çıkış butonu eklemek. Arayüzümüzü bu şekilde tamamen bitirmiş olacağız. Çıkış butonu için aşağıdaki resmi kullandım ben. Siz de bunu kullanabilirsiniz.

https://www.iconfinder.com/icons/763290/common_exit_logout_out_signout_stroke_icon#size=128

Şimdi bu çıkış yapma butonumuzu alıp sayfamızın sağ üst tarafına koyalım. Body etiketinin hemen sonrasına şu kodu ekleyelim.

<a href="#"><img src="cikis.png" class="cikis-btn"></a>

Daha sonra da bu butonumuz için ufak bir CSS kodu yazıyoruz. Aşağıdaki kodu style.css dosyamızın sonuna ekleyebilirsiniz.

.cikis-btn {
    width:36px;
    height:36px;
    position:absolute;
    right:25px;
    top:25px;
}

Ve böylece admin sayfamızın sağ üst tarafına şirin bir çıkış butonu iliştirmiş olduk. Bu ders tüm yapacaklarımız bu kadardı, artık yavaş yavaş sistemimizi kodlamaya başlayacağız.

Bu derslik bu kadar, görüşmek üzere…

Eğitim Setleri, PHP, PHP Ziyaretçi Defteri Uygulaması Mustafa Zahid Efe Yorum Yapılmamış