ile

PHP ile içerik yönetim sistemi – 7 Temalar ve Admin paneli

car-spray-painting

Görüntü sayfalarımız neredeyse bitti. Kullanıcıya göstermemiz gereken iki tip sayfa var. Kullanıcı eğer adminse, şifreyle giriş yaptıysa, yönetim yani admin paneli. Eğer giriş yapmadıysa, herkesin göreceği sayfa ve menüler. Eğer o sayfa sistemde yoksa, 404 yani sayfa bulunmadı mesajı göstermeliyiz.

Kullanıcıların göreceği sıradan sayfaların bileşenleri neler olacak? Bunları zaten HTML5 serisinde gözden geçirmiştik. Logo veya Site başlığı. Kategorilerin listesi. (Kategoriye tıklandığı zaman o kategori içerisindeki girdileri gösterecek.) Footer içinde de copyright bilgisi. Aslında daha çok bileşen eklenebilir ancak biz şimdilik bunları ekleyelim.

Ekran Resmi 2014-08-25 19.20.51

[code language=”html”]
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Site Başlığı</title>
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/app.css" />
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<header>
<div class="row">
<div class="large-3 large-centered columns page-title"><h1>Site Başlığı</h1></div>
</div>
<div class="row">
<div class="large-12 columns">
<ul class="nav">
<li><a href="/">Home</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/work/">Work</a></li>
<li><a href="/clients/">Clients</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</div>
</div>
</header>
<div class="row">
<div class="large-5 large-centered columns page-title">
<h2>Kategori Başlığı</h2>
</div>
</div>
<div class="row">
<article>
<h3>Yazı Başlığı</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <a href="view.php">Devamını Oku</a></p></p>
<small>10/05/1984 23:59:59</small>
</article>
<article>
<h3>Yazı Başlığı</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <a href="view.php">Devamını Oku</a></p></p>
<small>10/05/1984 23:59:59</small>
</article>
<article>
<h3>Yazı Başlığı</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <a href="view.php">Devamını Oku</a></p></p>
<small>10/05/1984 23:59:59</small>
</article>
<article>
<h3>Yazı Başlığı</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <a href="view.php">Devamını Oku</a></p></p>
<small>10/05/1984 23:59:59</small>
</article>
</div>
<footer class="row genel-footer">
<div class="large-12 columns">
COPYRIGHT 2014 meraklibilisimci.com
</div>
</footer>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
[/code]

Peki admin panelinde ne olacak? Üstte uzun tam sayfa bir menü, menüde meraklicms yazısı, admine girdiğimizi anlayalım diye, bir navigasyon, girdiler, kategoriler ve dosyalar diye. Her kategori için yapılacak işlemlerin gösterilebildiği açılır, kapanır menü. Tüm girdiler, yeni girdi ekle gibi. En sağa yaslı olarak kulllanıcı adının yazdığı bir isim. Ona tıklandığı zaman, profil sayfası açılır ve o profil sayfasından kendi kullanıcı adını ve şifresini değiştirebilir. Bir de yine üst menüde en sağda ayarlar diye bir link olsun ve sitemizle ilgili, site başlığı, açıklaması, copyright bilgisi gibi sabit şeyleri ordan değiştirelim.

Ekran Resmi 2014-08-25 19.44.30

[code language=”html”]
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Merakli CMS Yönetim Paneli</title>
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/app.css" />
<script src="js/vendor/modernizr.js"></script>
</head>
<body>

<nav class="top-bar" data-topbar>
<ul class="title-area">

<li class="name">
<h1>
<a href="#">
Merakli CMS
</a>
</h1>
</li>
<li class="toggle-topbar menu-icon"><a href="#"><span>menu</span></a></li>
</ul>
<section class="top-bar-section">

<ul class="center">
<li class="divider"></li>
<li class="has-dropdown">
<a href="#">Girdiler</a>
<ul class="dropdown">
<li><a href="#">Tüm girdiler &rarr;</a></li>
<li><a href="#">Yeni girdi</a></li>
</ul>
</li>
<li class="divider"></li>
<li class="has-dropdown">
<a href="#">Kategoriler</a>
<ul class="dropdown">
<li><a href="#">Tüm kategoriler &rarr;</a></li>
<li><a href="#">Yeni kategori</a></li>
</ul>
</li>
<li class="divider"></li>
<li class="has-dropdown">
<a href="#">Dosyalar</a>
<ul class="dropdown">
<li><a href="#">Tüm dosyalar &rarr;</a></li>
<li><a href="#">Yeni dosya</a></li>
</ul>
</li>
</ul>
<ul class="right">
<li class="divider"></li>
<li><a href="#">Admin</a></li>
<li class="divider"></li>
<li><a href="#">Ayarlar</a></li>
</ul>
</section>
</nav>

<div class="row admin-baslik">
<div class="large-3 columns">
<h3>Yeni yazı ekle</h3>
<p>Yeni yazı eklemek için bu formu ivedilikle doldurmalısınız.</p>
</div>
<div class="large-9 columns admin-icerik">

<form action="add.php" method="post">
<div class="row">
<div class="large-12 columns">
<label>Başlık
<input id="title" name="title" type="text" placeholder="Başlık" />
</label>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<label>İçerik
<textarea id="content" name="content" placeholder="İçerik"></textarea>
</label>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<label>Kategoriler
<select id="category" name="category">
<option value="<?=$category[‘id’]?>">PHP</option>
</select>
</label>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<button type="submit">Submit</button>
</div>
</div>
</form>
</div>

</div>

<footer class="row">
<div class="large-12 columns">
<hr/>
<div class="row">
<div class="large-6 columns">
<p>&copy; Copyright 2014 Meraklibilisimci.com</p>
</div>
</div>
</div>
</footer>

<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
[/code]

Bu iki sayfamızı da hallettikten sonra, html sayfası olarak yazacağımız hiçbirşey kalmadı diyebiliriz. Bir sonraki aşamada, lego parçalarını birleştireceğiz, yani işin en zor ve en zevkli kısmı başlıyor.

Proje dosyalarımızın şu anki aşaması da şurda:

https://github.com/mtkocak/merakli/tree/f195b3007cf1fd032adcbca0533423fca3417f8a

Yorumla

Yorum