CodErode » PHP http://www.coderode.com Hepsinden Bir Kaç Byte... Fri, 11 Jun 2010 16:13:19 +0000 en hourly 1 http://wordpress.org/?v=abc PHP ve CSS ile Basit Bir İlerleme Çubuğu http://www.coderode.com/php-css-ilerleme-cubugu.html http://www.coderode.com/php-css-ilerleme-cubugu.html#comments Tue, 02 Jun 2009 10:55:52 +0000 User-99 http://www.coderode.com/?p=320 PHP ve birazda CSS’ in yardımıyla basit fakat kullanışlı bir ilerleme çubuğu örneği.Daha fazla geliştirilebilir elbet, bu size kalmış.Anlamadığınız herhangi bir yer ile ilgili her türlü sorunuza elimden geldiğince cevap vermeye çalışırım.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>PHP - Ilerleme Cubugu</title>
 
<span id="more-320"></span>
 
	<style type="text/css">
		/*İlerleme çubuğumuzun çerçeve kısmı*/
		.cerceve {
			width: 300px; /*Genişlik*/
			padding: 2px; /*İçe doğru 2px çök*/
			border: 2px solid #666666; /*Kenarlık özellikleri*/
		}
 
		.ilerleme {
			text-align: center; /*İçindeki metinler ortalansın*/
			font-size: 15px; /*Font büyüklüğü 15px olsun*/
		}
	</style>
 
</head>
<body>
 
	<?php
	$Yuzdeler = array(23, 38, 75, 12, 47, 7, 64); // Yüzldeleri bir diziye atıyoruz
	?>
 
	<?php
	foreach ($Yuzdeler as $Yuzde): // Yüzdeleri sorgulamak için teker teker alıyoruz
 
		if ($Yuzde < 30) // Yüzde 30 dan küçük ise...
			$Renk = '#99cc00';
		elseif ($Yuzde > 30 and $Yuzde < 60) // Yüzde 30 dan büyük ve 60 dan küçük ise...
			$Renk = '#ffcc66';
		else // Yukarıdakiler değilse... (Dolayısıyla 60 dan büyük ise)
			$Renk = '#cc0033';
	?>
	<div class="cerceve">
		<div class="ilerleme" style="background-color: <?php echo $Renk; ?>; width: <?php echo $Yuzde; ?>%;">%<?php echo $Yuzde ?></div>
	</div>
	<br />
	<?php endforeach; ?>
 
</body>
</html>

Çıktısı şöyle olacaktır:
ilerleme cubugu

İyi çalışmalar.

]]> http://www.coderode.com/php-css-ilerleme-cubugu.html/feed 0 Ziyaretçi Defteri Yazalım – 1 http://www.coderode.com/ziyaretci-defteri-yazalim-1.html http://www.coderode.com/ziyaretci-defteri-yazalim-1.html#comments Thu, 22 Jan 2009 16:06:38 +0000 User-99 http://www.coderode.com/?p=116 Merhaba, arkadaşlar!

Bu benim sizlerle paylaşacağım ilk yazım olacak.Umarım ilerde daha fazlasını paylaşma fırsatı bulurum.Sizler de isteklerinizi, önerilerinizi veya

herhangi bir sorunuzu/sorununuzu bana iletebilirsiniz.Bende sizlere elimden geldiği kadar yardımcı olmaya çalışıcam.

Bu yazıda Ziyaretçi defterine kısaca “ZD” diyeceğiz.Şimdi isterseniz sizlerle birlikte neler yapacağımıza şöyle bir bakalım.

1. Ziyaretçi Bölümü: Ziyaretçilerin mesaj gönderebileceği ve gönderilen mesajların listelendiği bir anasayfa

2. Yönetici Paneli: ZD. sahibinin ziyaretçiden gelen mesajları yöntmesini sağlayan yönetim paneli

1. Ziyaretçi Bölümü

Şimdi veritabanımızı tasarlayarak başlayalım.Bunun için ziyaretçiden ne tür bilgiler alacağımızı belirlemeliyiz.Ben ziyaretçiden isim, e-pota ve mesajını

almaya karar verdim.Bildiğiniz gibi geneldede böyle olur.Siz isterseniz daha farklı bilgiler isteyebilirsiniz.

Tablo adı “benimzd” olan ve “no, isim, eposta, mesaj, tarih” sütunlarından oluşan bir veritabanı oluşturalım:

a) Veritabanı

1
2
3
4
5
6
7
8

CREATE TABLE `benimzd` (
`no` int(11) NOT NULL auto_increment,
`isim` varchar(255) character set latin5 NOT NULL,
`eposta` varchar(255) character set latin5 NOT NULL,
`mesaj` text character set latin5 NOT NULL,
`tarih` date NOT NULL,
PRIMARY KEY  (`no`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

Evet veritabanımızı tasarladık ve oluşturduk.Şimdi ise basit bir tasarım yapalım.Mesajlarda kullanıcı ismi, tarih ve mesaj görüntülenecek.Buna uygun bir tasarım yapalım.

b) Tasarım

b-1) HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="stil.css" rel="stylesheet" type="text/css" />
</head>
<body>
 
<!-- Taşıyıcı-Başlangıç -->
<div id="tasiyici">
 
	<!-- Mesaj-Başlangıç -->
<div id="baslik">
<h1>Benim ZD</h1>
</div>
 
	<!--Başlık-Son -->
 
	<!-- Mesaj-Başlangıç -->
<div class="mesaj-kutusu">
<div class="mesaj-bilgi"><b>Ali Veli</b> | 12.02.2008</div>
<div class="mesaj">
			Bu bir ziyaretçi mesajıdır.
		</div>
</div>
 
	<!-- Mesaj-Son -->
 
	<!-- Mesaj-Başlangıç -->
<div class="mesaj-kutusu">
<div class="mesaj-bilgi"><b><a href="">Veli Ahmet</a></b> | 12.02.2008</div>
<div class="mesaj">
			Bu başka bir ziyaretçi mesajıdır.
		</div>
</div>
 
	<!-- Mesaj-Son -->
 
	<!-- Sayfalama-Başlangıç -->
<div id="sayfalar">
		<a href="?sayfa=0">1</a>
		<a href="?sayfa=0">2</a>
		<a href="?sayfa=0">3</a>
		<a href="?sayfa=0">4</a>
	</div>
 
	<!-- Sayfalama-Son -->
 
	<!-- MesajFormu-Başlangıç -->
<div id="mesaj-formu">
<form action="ekle.php" method="post">
<input type="text" name="frm_isim" id="frm_isim" size="22" tabindex="1" />
			<label for="frm_isim"><small>İsminiz (gerekli)</small></label>
<input type="text" name="frm_eposta" id="frm_eposta" size="22" tabindex="2" />
			<label for="frm_eposta">E-Posta Adresiniz (isteğe bağlı)</label>
 
			<textarea name="frm_mesaj" id="frm_mesaj" cols="64%" rows="5" tabindex="4"></textarea>
<input name="frm_gonder" type="submit" tabindex="5" value="Gönder" />
</form>
</div>
 
	<!-- MesajFormu-Son -->
 
	<!-- Ayak-Başlangıç -->
<div id="ayak">
 
Tüm haklarını gizledik, bulamassınız!
</div>
 
	<!-- Ayak-Son -->
</div>
 
<!-- Taşıyıcı-Son -->
 
</body>
</html>

HTML kodumuz bu şekilde, şimdi CSS ile tasarımızı renklendirelim;

b-2) CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

body {
	background-color: #778899; /* Arkaplan rengimiz */
	font-family: "Trebuchet MS"; /* Fontumuzu belirtiyoruz */
	font-size: 14px; /* Varsayılan yazı boyutu */
	color: white; /* Varsayılan yazı rengi */
	text-align: left; /* Yazılar sola dayansın */
}
 
#baslik { /*Sitemizin başlığının bulunduğu bölüm*/
	background-color: white; /* Arkaplan rengimizi beyaz olarak ayarlıyoruz*/
	padding: 10px;
	color: red; /* Yazı rengi kırmızı */
}
 
#tasiyici { /* 600px genişliğinde ortalanmış bir sayfa */
	margin: 0 auto;
	width: 600px;
}
 
.mesaj-kutusu { /* Mesajların bulunduğu sınıf */
	background-color: #d2691e;
	padding: 10px;
	margin-top: 20px;
}
 
	.mesaj-kutusu .mesaj {
		color: #ffd700; /* Mesajların rengi */
	}
 
	.mesaj-kutusu .mesaj-bilgi { /* Mesaj bilgilerinin bulunduğu sınıf */
		background-color: green;
		padding: 5px;
		margin-bottom: 10px;
		border-top: 2px solid black;
	}
 
	.mesaj-kutusu .mesaj-bilgi b { /* Yazar adının vurgusu (linksiz)*/
		color: #ccc;
	}
 
	.mesaj-kutusu .mesaj-bilgi a { /* Yazar adının vurgusu (linkli)*/
		color: lime;
		text-decoration: none;
	}
 
	.mesaj-kutusu .mesaj-bilgi a:hover {
		text-decoration: underline;
	}
 
#sayfalar { /* Sayfalama için stil veriyoruz*/
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	margin-top: 20px;
	text-align: center;
}
 
	#sayfalar a {
		text-decoration: none;
		color: black;
		padding: 5px;
		font-weight: bold;
	}
 
	#sayfalar a:hover {
		color: white;
	}
 
	#sayfalar a.aktif {
		background: black;
		color: #fff;
	}
 
#mesaj-formu {
	margin-top: 60px;
}
 
	#mesaj-formu input, #mesaj-formu textarea {
		font-size: 20px;
		color: #666;
		font-family: "Trebuchet MS";
	}
 
#ayak { /* Sitemizin ayaklık kısmı */
	background-color: #696969;
	padding: 5px;
	margin-top: 50px;
}

Sonuç olarak aşağıdaki gibi bir tasarım ortaya çıkartmış olduk:

zd-onizleme1

Böylelikle tasarım kısmını bitirmiş oluyoruz ve kodlama kısmına geçiyoruz.

c) Kodlama

Kodlamaya geçmeden önce kendimize bir dosya düzeni belirlememiz bize kolaylık sağlayacaktır.

/hariciler

–vt_baglan.php

–site_bilgiler.php

/css

–stil.css

/site_ust.php

/site_alt.php

/index.php

/ekle.php

Basit bir dosya düzeni çıkarttık kendimize.Dosyaların ne görev gördüğü isimlerinden anlaşılıyor zaten.Yinede kodlarken daha iyi anlayacaksınız.

c-1) vt_baglan.php

Veri tabanına bağlanmak için bu dosyayı kullanacağız.Bu dosyanın içeriği ise şöyle;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<?php
$vt_alan = 'veritabanı alan adı';
$vt_isim = 'veritabanı adı';
$vt_kullanici = 'veritabanı kullanıcı adı';
$vt_sifre = 'veritabanı şifresi';
 
$vt = @mysql_connect($vt_alan, $vt_kullanici, $vt_sifre);
if ($vt)
{
	$tablo_sec = @mysql_select_db($vt_isim);
	if (!$tablo_sec)
	{
		exit('Veritabanı seçilemedi!');
	}
}
else
	exit('Veritabanına bağlanılamadı!');
?>

c-2) site_bilgiler.php

Sitemiz ile ilgili bazı verileri içeren dosyamız.Bununda içeriği aşağıdaki gibidir.

1
2
3
4
5
6

<?php
define('tarayici_baslik', 'Hoşgeldiniz! - Z. Defterim'); //Tarayıcı başlığı
define('site_baslik', 'Benim ZD'); // Site başlığı
define('site_hakki', 'Tüm hakları saklıdır.'); //Sitenin hakları vs...
define('sayfa_basi_mesaj', 5); //Sayfa başına sıralanacak mesaj sayısı
?>

c-3) stil.css

İçeriği tasarım kısmında yazdığımız css kodudur.

c-4)site_ust.php

Bu dosya sitemizin üst kımındaki (tarayıcı başlığı, site başlığı vs.) bilgileri içeriyor.İçeriğini ise şöyle yapıyoruz;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="css/stil.css" rel="stylesheet" type="text/css" />
</head>
<body>
 
<!-- Taşıyıcı-Başlangıç -->
<div id="tasiyici">
 
	<!-- Mesaj-Başlangıç -->
<div id="baslik">
<h1><?php echo site_baslik; ?></h1>
</div>
 
	<!--Başlık-Son -->

c-5) site_alt.php

Sitemizin alt kısmının HTML kodunu tutan dosyadır.İçeriği gösterecek olursak;

1
2
3
4
5
6
7
8
9
10
11
12
13

<!-- Ayak-Başlangıç -->
<div id="ayak">
 
<?php echo site_hakki; ?>
</div>
 
	<!-- Ayak-Son -->
</div>
 
<!-- Taşıyıcı-Son -->
 
</body>
</html>

c-6)  index.php

Evet geldi sıra şimdi anasayfamızı yazmaya.Yazdığımız diğer dosyaların burada toplayacağız.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

<?php
 
require_once('hariciler/vt_baglan.php'); // VT bağlantısı için kullandığımız dosyayı ekliyoruz
require_once('hariciler/site_bilgiler.php');// Site içi bazı sabit bilgileri içeren dosyamızı ekliyoruz
 
require_once('site_ust.php');//Üst kısmı ekliyoruz
 
$sayfa = 0; // sayfa varsayılan olarak 0
if (@$_GET['sayfa']) //eğer sayfa değiştiriliyorsa...
{
	$sayfa = intval($_GET['sayfa']);
 
}
 
//Mesajlar sıralanıyor...
$sorgu = 'SELECT * FROM benimzd ORDER BY no DESC LIMIT '.$sayfa.', '.sayfa_basi_mesaj;
$mesajlar = mysql_query($sorgu);
 
if ($mesajlar)
{
	$toplam = mysql_num_rows($mesajlar);
	if ($toplam > 0)
	{
		while ($mesaj = mysql_fetch_assoc($mesajlar))
		{
			$isim = $mesaj['isim'];
			if (!empty($mesaj['eposta']))
			{
				$isim = '<a href="mailto:'.$mesaj['eposta'].'">'.$mesaj['isim'].'</a>';
			}
			?>
<div class="mesaj-kutusu">
<div class="mesaj-bilgi"><b><?php echo $isim; ?></b> | <?php echo $mesaj['tarih']; ?></div>
<div class="mesaj"><?php echo $mesaj['mesaj']; ?></div>
</div>
 
			<?php
		}
	}
	else
		echo 'Hiç mesaj bulunamadı.'; //Eğer hiç mesaj yoksa uyarı ver
}
else
	echo 'MySQL sorgu hatası oluştu!'; //Sorgu hatası oluşursa uyar
 
//Sayfalama yapılıyor
echo '
<div id="sayfalar">';
$toplam_sorgusu = mysql_query('SELECT no FROM benimzd');
$toplam_mesaj = mysql_num_rows($toplam_sorgusu);
$toplam_mesaj /= sayfa_basi_mesaj;
 
$sayfa_sayac = 0;
$sayfa_link = 0;
 
while ($sayfa_sayac < $toplam_mesaj)
{
	$sayfa_sayac += 1;
	$aktif = ($sayfa_link == $sayfa) ? 'class="aktif"' : '';
	echo '<a '.$aktif.' href="?sayfa='.$sayfa_link.'">'.$sayfa_sayac.'</a>';
	$sayfa_link += sayfa_basi_mesaj;
}
echo '</div>
 
';
 
//Mesaj ekleme formu...
?>
<div id="mesaj-formu">
<form action="ekle.php" method="post">
<input type="text" name="frm_isim" id="frm_isim" size="22" tabindex="1" />
		<label for="frm_isim"><small>İsminiz (gerekli)</small></label>
<input type="text" name="frm_eposta" id="frm_eposta" size="22" tabindex="2" />
		<label for="frm_eposta">E-Posta Adresiniz (isteğe bağlı)</label>
 
		<textarea name="frm_mesaj" id="frm_mesaj" cols="64%" rows="5" tabindex="4"></textarea>
<input name="frm_gonder" type="submit" tabindex="5" value="Gönder" />
</form>
</div>
 
<?php
 
mysql_close(); //Açmış olduğumuz VT bağlantısını kapatıyoruz
 
require_once('site_alt.php');//Sitemizin alt kısmını ekliyoruz
 
?>

c-7) ekle.php

Mesajları eklemek için kullanacağımız dosya;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

<?php
 
require_once('hariciler/vt_baglan.php'); //VT bağlantısını gerçekleştiriyoruz
 
//Mesaj formu değişkenlerini alıyoruz
$isim = @$_POST['frm_isim'];
$eposta = @$_POST['frm_eposta'];
$mesaj = @$_POST['frm_mesaj'];
 
//Eğer isim ve mesaj girilmişse...
if (!empty($isim) &#038;& !empty($mesaj))
{
	//Girilen verilerdeki zararlı kodları temizliyoruz
	$isim = htmlentities($isim);
	$isim = mysql_real_escape_string($isim);
 
	$mesaj = htmlentities($mesaj);
	$mesaj = mysql_real_escape_string($mesaj);
 
	//Eğer eposta da  girilmişse onu da temizle
	if (!empty($eposta))
	{
		$eposta = htmlentities($eposta);
		$eposta = mysql_real_escape_string($eposta);
	}
 
	//Sorguyu hazırla
	$sorgu = 'INSERT INTO benimzd(isim, eposta, mesaj, tarih) VALUES("'.$isim.'", "'.$eposta.'", "'.$mesaj.'", NOW())';
	$durum = mysql_query($sorgu);
 
	//Duruma göre işlem yap
	if ($durum)
	{
		header('Location: index.php');
	}
	else
	{
		echo 'MySQL sorgu hatası!';
	}
}
else
{
	header('Location: index.php');
}
 
?>

Evet arkadaşlar hepsi bu kadar.Yönetici panelini bu yazının ikinci bölümünde yazacağız.Umarım birileri için faydalı olur.İsterseniz bitmiş projeyi aşağıdaki bağlantıdan indirebilirsiniz.

Herkese iyi çalışmalar ve çalışmalarında başarılar…

İndirme Adresi:  http://rapidshare.com/files/187690379/coderode_zd.rar

Saygılarımla

User-99

]]> http://www.coderode.com/ziyaretci-defteri-yazalim-1.html/feed 1