Haber sitelerinde sürekli gördüğümüz günlük haberler, haftalık haberler ve aylık haberler şeklinde olan modülü yapıp sizlerle paylaşacağım.Öncelikle bunun için bir tab menüye ihtiyacımız var ve bunun için jquerui nin tabs eklentisi çok işimize yarayacak.Jquery tabs eklentisi için jqueryui sitesini ziyaret edebilirsiniz.
HTML’imizi ve Css’imizi oluşturalım
Cümlelerimde de dediğim gibi öncelikle tabımızı oluşturmalıyız bunun içinde JquerUi sitesini ziyaret ederek jquery tabs eklentisini indirelim ve gerekli jquery dosyalarımız ve kodlarımızı index.php dosyamıza entegre edelim.
<?php require "baglan.php"; ?> <!DOCTYPE html> <html> <head> <title>www.bulutuzer.com</title> <meta http-equiv="content-type" content="text-html; charset= utf-8" /> <script src="js/jquery-1.9.1.js"></script> <script src="js/jquery-ui-1.10.1.custom.js"></script> <script> $(function() { $( "#tabs" ).tabs(); $( "#dialog-link, #icons li" ).hover( function() { $( this ).addClass( "ui-state-hover" ); }, function() { $( this ).removeClass( "ui-state-hover" ); } ); }); </script> <style type="text/css"> * { margin: 0; padding: 0; } ul,li,a { list-style: none; text-decoration: none; } body { background: rgb(240,240,240); font-family: arial; font-size: 12px; line-height: 1; } .clear { clear: both; } div.tabloKapsayici { background: rgb(255,255,255); border: 1px solid rgb(85,85,85); margin: 0 auto; width: 300px; height: 360px; } ul { width: 276px; margin: 0 auto; } ul li { float :left; margin: 10px; padding: 10px; border: 1px solid rgb(85,85,85); width: 50px; text-align: center; border-radius: 3px; outline: none; } ul li a { color: rgb(125,125,125); outline: none; border-bottom:1px solid rgb(255,255,255);x transition: border-bottom 0.8s ; -webkit-transition: border-bottom 0.8s ; -moz-transition: border-bottom 0.8s ; -o-transition: border-bottom 0.8s ; } ul li a:hover { border-bottom: 1px solid rgb(85,85,85); } div.tab { width: 250px; margin: 0 auto;} span.tarih { color: rgb(207,0,0) } </style> <div class="tabloKapsayici"> <div id="tabs"> <ul> <li><a href="#tabs-1">Bu Gün</a></li> <li><a href="#tabs-2">Bu Hafta</a></li> <li><a href="#tabs-3">Bu Ay</a></li> </ul> <div class="tab" id="tabs-1">Günlük Haberlerimizin Tabı</div> <div class="tab" id="tabs-2">Haftalık Haberlerimizin Tabı</div> <div class="tab" id="tabs-3">Aylık Haberlerimizin Tabı</div> </div> </div>
Veritabanımızı oluşturalım.
Ondan önce veritabanında verileri sürekli karışık ekledim ki test ederken hataları daha iyi kontrol edebilmek için.Şimdi bir tablomuz ve 4 sütunumuzun olması yeterli.İd, konu başlığımız, konu içeriğimiz ve tarihimiz tarih sütunumuzun türü datetime olarak kayıt edilmelidir.
-- phpMyAdmin SQL Dump -- version 2.10.3 -- http://www.phpmyadmin.net -- -- Anamakine: localhost -- Üretim Zamanı: 28 Şubat 2013 saat 17:05:48 -- Sunucu sürümü: 5.0.51 -- PHP Sürümü: 5.2.6 SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO"; -- -- Veritabanı: `tarih` -- -- -------------------------------------------------------- -- -- Tablo yapısı: `buay` -- CREATE TABLE `buay` ( `id` int(60) NOT NULL auto_increment, `konuBaslik` text NOT NULL, `konuIcerik` text NOT NULL, `konuTarih` datetime NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=28 ; -- -- Tablo döküm verisi `buay` -- INSERT INTO `buay` VALUES (1, '1. Haber Başlığı', '1. Haber İçeriği', '2013-02-01 00:00:00'); INSERT INTO `buay` VALUES (2, '2. Haber Başlığı', '2. Haber İçeriği', '2013-02-02 00:00:00'); INSERT INTO `buay` VALUES (3, '3. Haber Başlığı', '3. Haber İçeriği', '2013-02-03 00:00:00'); INSERT INTO `buay` VALUES (4, '4. Haber Başlığı', '4. Haber İçeriği', '2013-02-04 00:00:00'); INSERT INTO `buay` VALUES (5, '5. Haber Başlığı', '5. Haber İçeriği', '2013-02-05 00:00:00'); INSERT INTO `buay` VALUES (6, '6. Haber Başlığı', '6. Haber İçeriği', '2013-02-06 00:00:00'); INSERT INTO `buay` VALUES (7, '7. Haber Başlığı', '7. Haber İçeriği', '2013-02-07 00:00:00'); INSERT INTO `buay` VALUES (8, '8. Haber Başlığı', '8. Haber İçeriği', '2013-02-08 00:00:00'); INSERT INTO `buay` VALUES (9, '9. Haber Başlığı', '9. Haber İçeriği', '2013-02-09 00:00:00'); INSERT INTO `buay` VALUES (10, '10. Haber Başlığı', '10. Haber İçeriği', '2013-02-10 00:00:00'); INSERT INTO `buay` VALUES (11, '11. Haber Başlığı', '11. Haber İçeriği', '2013-02-11 00:00:00'); INSERT INTO `buay` VALUES (12, '12. Haber Başlığı', '12. Haber İçeriği', '2013-02-12 00:00:00'); INSERT INTO `buay` VALUES (13, '13. Haber Başlığı', '13. Haber İçeriği', '2013-02-13 00:00:00'); INSERT INTO `buay` VALUES (14, '14. Haber Başlığı', '14. Haber İçeriği', '2013-02-14 00:00:00'); INSERT INTO `buay` VALUES (15, '15. Haber Başlığı', '15. Haber İçeriği', '2013-02-15 00:00:00'); INSERT INTO `buay` VALUES (16, '16. Haber Başlığı', '16. Haber İçeriği', '2013-02-16 00:00:00'); INSERT INTO `buay` VALUES (17, '17. Haber Başlığı', '17. Haber İçeriği', '2013-02-17 00:00:00'); INSERT INTO `buay` VALUES (18, '18. Haber Başlığı', '18. Haber İçeriği', '2013-02-17 00:00:00'); INSERT INTO `buay` VALUES (19, '19. Haber Başlığı', '19. Haber İçeriği', '2013-02-28 00:00:00'); INSERT INTO `buay` VALUES (20, '20. Haber Başlığı', '20. Haber İçeriği', '2013-02-28 00:00:00'); INSERT INTO `buay` VALUES (21, '21. Haber Başlığı', '21. Haber İçeriği', '2013-03-01 00:00:00'); INSERT INTO `buay` VALUES (22, '22. Haber Başlığı', '22. Haber İçeriği', '2013-02-28 00:00:00'); INSERT INTO `buay` VALUES (23, '23. Haber Başlığı', '23. Haber İçeriği', '2013-03-02 14:44:33'); INSERT INTO `buay` VALUES (24, '24. Haber Başlığı', '24. Haber İçeriği', '2013-03-03 14:44:55'); INSERT INTO `buay` VALUES (25, '25. Haber Başlığı', '25. Haber İçriği', '2013-02-04 14:48:50'); INSERT INTO `buay` VALUES (26, '26. Haber Başlığı', '26. Haber İçeriği', '2013-02-05 14:51:38'); INSERT INTO `buay` VALUES (27, '27. Haber Başlığı', '27. Haber İçeriği', '2013-03-03 15:52:47');
Günlük haber tablarımızın php kodunu oluşturalım
Tabs-1 id’li divimizin içerisine ilk önce date(“d”) komutunu kullanarak günü rakamsal olarak gösteriyoruz ve sql sorgumuzda gün ekini kullanarak tablomuzda ki tarih sütunumuzu date(“d”) komutundaki geçerli güne eşitleyip o gün içerisinde girilen konuları ekrana yazdırıyoruz.
<?php $gecerliGun = date("d"); $gunSorgu = mysql_query("select * from buay where DAY(konuTarih) = '$gecerliGun' "); while ($haberGun = mysql_fetch_array($gunSorgu)){ echo $haberGun["konuBaslik"]." ".$haberGun["konuİcerik"]."<span class="tarih">Tarih : ".$haberGun["konuTarih"]."</span>"; } ?>
Haftalık haber tablarımızın php kodunu oluşturalım
Tabs-2 id’li divimizde biraz farklı bir yok izliyoruz çünkü php de ay içerisinde bulunan haftaları çekemiyoruz şuan en basit ve kolay yöntem bu olarak geldi ayrıca kodun bir kısmı alıntıdır kaynakları konu sonunda vereceğim.
<?php $baslat = date(Y."-".m."-".d); $year = substr($baslat, 0,4); $month = substr($baslat, 5, 2); $day = substr($baslat, 8, 2); $tarih = date("Y-m-d", mktime(0, 0, 0, $month, $day, $year)); $tarih7gun = date("Y-m-d", mktime(0, 0, 0, $month, $day+7, $year)); $gunSorgu = mysql_query("select * from buay where konuTarih between '$tarih' and '$tarih7gun' "); while ($haberHafta = mysql_fetch_array($gunSorgu)){ echo $haberHafta["konuBaslik"]." ".$haberHafta["konuİcerik"]."<span class="tarih">Tarih : ".$haberHafta["konuTarih"]."</span> "; } ?>
Aylık haber tablarımızın php kodunu oluşturalım
Tabs-1 id’li divimizde ki adımları aya göre ayarlayıp kayıt ettiriyoruz.Date(“d”) yerine date(“m”) olarak geçip sorgumuz içerisinde day(konuTarih) olarak değil de ay olduğu için month(konuTarih) olarak sorgumuza işliyoruz.
<?php $gecerliAy = date ("m"); $aySorgu = mysql_query("select * from buay where MONTH(konuTarih) = '$gecerliAy' "); while($haberAy = mysql_fetch_array($aySorgu)){ echo $haberAy["konuBaslik"]." ".$haberAy["konuİcerik"]."<span class="tarih">Tarih : ".$haberAy["konuTarih"]."</span> "; } ?>
Uygulama Google Drive İndir : Google Drive’dan İndir
Uygulama WordPressden İndir : WordPpress’den İndir
Destek Sağlayan Kaynak : Sanal Kurs
Örneğine göre doğru gibi gözükse de bu haber sistemlerinde problem teşkil edecektir.
Mesela haber sitelerinde bu algoritmaya göre bir gün öncesi ayın 22si ise önceki ayların 22’si de çekilir.
Altta örnek yolluyorum.
$date = date_create(‘today’);
$date = date_modify($date, ‘-1 day’);
$date = date_format($date, ‘Y-m-d’);
$time = date(“H:i:s”);
$datetime = “$date $time”;
Saat ve zamanı aldıktan sonra;
WHERE habertarihi >= ‘$datetime'”
kullanabiliriz. Dikkat etmemiz gereken habertarihinin datetime olarak girilmiş olmasıdır. Yani Y-m-d H:i:s
Fakat genç arkadaşım sevdim çalışmalarını.
Teşekkür ederim evet haklısınız kararsızlık veriyor bazen onu güncelleyip tekrardan atacağım bilgilendirme için tekrardan teşekkür ederim.