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. [code lang="html"] <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>[email protected]</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> [/code] 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. [code lang="css"] 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; } [/code] Ş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. [code lang="html"] <link rel="stylesheet" href="style.css"> [/code] 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. [code lang="html"] <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> [/code] 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. [code lang="html"] <a href="#"><img src="cikis.png" class="cikis-btn"></a> [/code] Daha sonra da bu butonumuz için ufak bir CSS kodu yazıyoruz. Aşağıdaki kodu style.css dosyamızın sonuna ekleyebilirsiniz. [code lang="css"] .cikis-btn { width:36px; height:36px; position:absolute; right:25px; top:25px; } [/code] 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...

Yorum Yok

Yorum Bırakın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir