Dreamweaver ile dinamik uygulamalar geliştirmek

Merhaba. Bu yazıda sizlere Dreamweaver kullanarak nasıl dinamik web uygulamaları geliştirebileceğinizi anlatacağım. Bunun için makinanızda kurulu olması gerekenler ise şunlar:

*PHP
*MySQL
*Apache Server

ya da

*Wamp Server

Eğer yukarıdakiler kurulu ise devam edebiliriz, henüz kurmamış iseniz buradan wamp server'ı indirebilirsiniz. Bu örnekte sisteminizde wamp server'ın kurulu olduğu varsayılacak.

Öncelikle dreamweaver uygulamasında boş bir dinamik sayfa yaratın ve php teknolojisini seçin.

Ardından sol taraftaki menüden Application tabına tıklayın.

Hazır dinamik applikasyonları kullanmak için bundan sonra hep bu taba başvuracağız. İlk olarak yapmamız gereken şey Create a site for this file yazan linke tıklayarak yeni bir site yaratmak olacak. şöyle bir pencere açılacak:

Şimdi sitenize bir isim verin. Ardından size sitenizin adresi sorulacaktır. Buraya http://localhost/deneme gibi birşey yazabilirsiniz. localhost sizin makinanızdan erişileceği anlamına gelir, deneme ise daha sonra adres çubuğundan direk yazarak erişebileceğiniz isimdir. Eğer makinanızda wamp server kurulu ise bu adı, www klasörü içindeki alanla aynı yapın, sonradan karışıklık olmasın. Örneğin www klasörü altına deneme adında bir klasör yaratırsanız bu alana da http://localhost/deneme adını koymalısınız. Next butonuyla devam edebiliriz.

Şimdi size hangi teknolojiyi kullanmak istediğiniz sorulacak, Yes, i want to use a server technology dedikten sonra açılan combo kutucuktan PHP - MySQL i seçin ve next butonuna tıklayın.

Açılan pencereden Edit and test locally seçeneğini seçtikten sonra size bu siteye ait dosyaların nerede tutulduğu sorulacak. Bunun için wamp serverda belirlediğiniz www klasörünün altına bir klasör oluşturun ve buraya da o klasörün adresini girin.

Şimdi size tekrar sitenizin adresi sorulacak, buraya yine http://localhost/deneme gibi az önce yarattığınız klasörün adı neyse onu yazın ve next butonunu tıklayın.

 

Açılan pencereden No seçeneğini seçtikten sonra tekrar next butonuna tıklıyoruz. Açılan pencereden done butonuna tıklayarak yeni site yaratma işlemini bitirmiş oluyoruz. Yarattığımız boş php sayfasını www klasörü altındaki deneme klasörü altına kaydettiğimiz zaman artık server teknolojilerini buradan kullanabiliriz demektir. Bu sayfayı deneme klasörü altına index.php olarak kaydedin. Bu örnek için örnek bir mysql tablosuna ihtiyacımız olacak. Wamp server'ın sisteminizde çalıştığından emin olun. Eğer çalışıyorsa sağ alt köşedeki ikona tıklayın ve phpmyadmin'i açın.

 

Açılan sayfadan SQL butonuna tıklayın. Bir popup pencere açılacaktır.

Bu alana önce:

CREATE DATABASE `benim_database` DEFAULT CHARACTER SET latin5 COLLATE latin5_turkish_ci;

GRANT ALL ON benim_database . * TO admin@localhost IDENTIFIED BY '123456';

ardından da benim_database database'ini seçerek SQL sekmesine tıklayın ve açılan alana aşağıdaki sorguyu yapıştırıp çalıştırın.

 

CREATE TABLE `users` (

`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`username` VARCHAR( 150 ) NOT NULL ,
`pass` VARCHAR( 150 ) NOT NULL
) ENGINE = MYISAM ;

 

INSERT INTO `benim_database`.`users` (
`id` ,

`username` ,
`pass`
)
VALUES (
NULL , 'ali_tepe', '23456'
), (

NULL , 'hasan_guzel', '765432'
);

 

sorgusunu çalıştırın.

 

Yukarıdaki sorguyu çalıştırdığınızda benim_database adında bir database oluşturacak, users adında, aşağıdaki gibi görünen bir tablo elde edeceksiniz ve de admin adındaki kullanıcıya 123456 şifresi ile bu databasedeki tüm tablolara erişim hakkı vereceksiniz.

 

 

Tablomuza deneme olması amacıyla iki tane de veri girdik. Bunlardan ilki ali_tepe kullanıcı adı ve 23456 parolasıyla ilk kullanıcımız, diğeri ise hasan_guzel kullanici adı ve 765432 parolasıyla ikinci kullanıcımız. MySQL veritabanımızda ihtiyacımız olanları yarattıktan sonra tekrar dreamweavera dönebilir ve server teknolojilerini nihayet kullanmaya başlayabiliriz. Application tabı altındaki + butonuna tıklayın ve MySQL connection seçeneğini seçin.

 

 

Açılan pencereyi aşağıdaki gibi doldurun. Connection name deneme_baglantisi olmak zorunda değil buraya istediğinizi girebilirsiniz. Sever local server olduğundan localhost, username, yukarıda çalıştırdığımız grant all sorgusundaki gibi admin ve şifresi de IDENTIFIED BY kısmında belirttiğimiz gibi 123456 olacak. Database için select butonunu tıklayın ve açılan pencereden benim_datase i seçin ve okleyin. Herşey tamamsa Test butonuna tıklayın, eğer buraya kadar herşeyi doğru yaptıysanız sorun çıkmaması gerekir, bir problem varsa yukarıdaki adımları tekrar gözden geçirin. Sorun yoksa okleyin.

Şimdi application tabında şöyle birşey görüyor olmalısınız:

Bu bizim mysql ile düzgün bağlantı kurduğumuzun göstergesi. Şimdi Recordset oluşturmak için Databases tabında bindings tabına geçelim ve + butonuna basarak Recordset (Query) yi seçelim.

 

Açılan pencere aşağıdaki gibi gözükecek. Name kısmına ben kullanicilar adını verdim, siz istediğiniz adı verebilirsiniz. Connection için tabii ki deneme_baglantisi ni seçtim ve tablo olarak users tablosunu belirledim. Aşağıdaki Filter ve Sort daha sonraki bir dersin konusudur. Bunu da ok diyerek geçebilirsiniz.

şimdi bindings kısmında şöyle birşey görüyor olmalısınız:

Buraya kadar mysql ile bağlantımızı kurduk, recordsetimizi oluşturduk. Şimdi ise oluşturduğumuz index.php dosyasında bir tablo yaratalım ve bu tablo ile mysql veritabanımızdaki users tablosunda bulunan tüm kullanıcı adlarını ve parolaları ekrana bastıralım. Aşağıdaki HTML kodunu girerek tablonuzu oluşturabilirsiniz.

<table width="200" border="1">

<tr>
<td>id</td>
<td>Kullanıcı Adı </td>
<td>Parola</td>
</tr>
<tr>

<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>

<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

Şöyle bir tablo görüyor olmalısınız:

Şimdi de recordsette bindings altında oluşturduğumuz alanları bu alanların içine sürükleyip bırakalım. En sonunda göreceğiniz:

böyle bir tablo olmalıdır. Eğer sürükleyip bırakmayı anlamadıysanız az önce oluşturduğumuz tabloyu silip yerine aşağıdaki html (ve php) kodunu yapıştırabilirsiniz:

<table width="200" border="1">
<tr>

<td>id</td>
<td>Kullanıcı Adı </td>
<td>Parola</td>
</tr>
<tr>
<td><?php echo $row_kullanicilar['id']; ?></td>

<td><?php echo $row_kullanicilar['username']; ?></td>
<td><?php echo $row_kullanicilar['pass']; ?></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>

<td>&nbsp;</td>
</tr>
</table>

Çalışmanızı kaydedin ve klavyenizden F12 tuşuna basarak nasıl göründüğünü izleyin. Bende şöyle görünüyor:

Gördüğünüz gibi yalnızca ilk olanı getirdi, çünkü scriptimize mevcutların hepsini getirmesini söylemedik. İsterseniz şimdi de tablodaki tüm verileri getirmesini isteyelim. Bunun için dreamweavera geri dönüp bir ekleme daha yapmalıyız. Şimdi tabloda {kullanicilar.id} üzerine tıklayın ve aşağıdan <tr> alanını seçin. Böylece tekrarlama yapmak istediğimiz alanı belirlemiş oluyoruz.

 

<tr> alanı hala seçiliyken Applications tabında Bindings sekmesinin yanındaki Server Behaviours sekmesini seçin ve + butonuna basın. Açılanlar arasından Repeat Region ı seçin.

Açılan pencere aşağıdaki gibi olacak: Buradan All records seçeneğine tıklayın ve okeyleyin.

çalışmanızı kaydedin ve F12 tuşuna basarak neler olduğunu izleyin.

Gördüğünüz gibi tablomuzdaki tüm verileri artık buradan izleyebiliriz.

Şimdi de bir form oluşturarak kullanıcı girişi yapalım. Öncelikle yine deneme klasörü altına giris.php adında bir dosya yaratın. giris.php icin asağıdaki kodu kullanabilirsiniz:

<!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">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
<title>giris</title>

</head>

<body>
<form name="giris_formu">
<table width="351" height="126" border="1">

<tr>
<td width="111">Kullanıcı Adı </td>
<td width="224"><input name="username" type="text" id="username" /></td>

</tr>
<tr>
<td>Parola</td>
<td><input name="pass" type="text" id="pass" /></td>

</tr>
<tr>
<td height="34">&nbsp;</td>
<td><input name="Giri&#351;" type="submit" id="Giri&#351;" value="Submit" /></td>

</tr>
</table>
</form>
</body>
</html>

 

Bu kodu kopyaladıktan sonra Server Behaviours dan User Authentication'ı ve oradan da Log in User'ı seçin.

 

Açılan pencereyi aşağıdaki gibi şekillendirin.

 

 

Şimdi iki sayfa yaratın ve isimlerini basarili.php ve basarisiz.php koyun. Sırasıyla html kodları şöyle olsun:

basarili.php

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />

<title>Untitled Document</title>
</head>

<body>
<table width="360" height="50" border="1">

<tr>
<td height="44" colspan="3">Giriş Başarılı! </td>
</tr>
</table>

</body>
</html>

basarisiz.php

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
<title>Untitled Document</title>

</head>

<body>
<table width="360" height="50" border="1">
<tr>

<td height="44" colspan="3">Giriş Başarısız </td>
</tr>
</table>
</body>

</html>

giris.php sayfasını kaydettikten sonra F12 tuşuna basın ve doğru ve yanlış denemeler yaparak neler olduğunu görün.

Şimdi de tablomuza yeni veri girebilmemiz için yeni.php adında bir dosya yaratalım. dosyamızın HTML kodu aşağıdaki gibi olabilir:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
<title>Untitled Document</title>

</head>

<body>
<form name="yeni_gir">
<table width="268" height="135" border="1">

<tr>
<td width="100" height="40">Kullanıcı adı: </td>
<td width="152"><input name="username" type="text" id="username" /></td>

</tr>
<tr>
<td height="37">Şifre:</td>
<td><input name="pass" type="text" id="pass" /></td>

</tr>
<tr>
<td>&nbsp;</td>
<td><input type="submit" name="Submit" value="Yeni Kaydı Gir" /></td>

</tr>
</table>
</form>
</body>
</html>

kendisi şu şekilde görünecektir:

Şimdi de bu alanlarla databasedeki alanlarımızı eşleştirerek veri girmeyi sağlamak için server behaviours sekmesinden + butonuna tıklayalım ve insert record'u seçelim.

Karşımıza aşağıdaki gibi bir pencere çıkacak. Çıkan pencereyi aşağıdaki gibi şekillendirin. Zaten eğer herşeyi doğru yaptıysanız çok fazla uğraşmanıza gerek kalmayacak. After inserting, go to kısmına da index.php yazın

yeni.php dosyasını saklayın ve F12 ye basarak yeni bir kayıt girin.

Şimdi de eklenen kayıtları düzenlemek için bir arayüz yapalım. Bunun için edit.php adında bir dosya yaratın ve aşağıdaki html kodunu girin:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />

<title>Untitled Document</title>
</head>

<body>
<form name="duzenle">
<table width="268" height="135" border="1">

<tr>
<td height="40">id:</td>
<td><input name="id" type="text" id="id" /></td>

</tr>
<tr>
<td width="100" height="40">Kullanıcı adı: </td>
<td width="152"><input name="username" type="text" id="username" /></td>

</tr>
<tr>
<td height="37">Şifre:</td>
<td><input name="pass" type="text" id="pass" /></td>

</tr>
<tr>
<td>&nbsp;</td>
<td><input type="submit" name="Submit" value="Yeni Kaydı Gir" /></td>

</tr>
</table>
</form>
</body>
</html>

Kodu kopyaladıktan sonra server behaviours sekmesinden + butonuna tıklayın ve update record'u seçin. Açılan pencere şöyle olacaktır:

Kendi pencerenizi yukarıdaki gibi düzenleyin. After updating kısmına yine index.php yazın. Burada önemli olan şey formdaki id kısmıdır. Siz update etmek istediğinizde mysql hangi alanı değiştirilmesini öğrenmek ister. Eğer değiştirmek istediğiniz alan mevcutsa, o alanları istediğiniz gibi değiştirebilirsiniz. Ancak varolmayan bir id'yi düzenlemek isterseniz haliyle hiçbirşeyi düzenleyemezsiniz. Tabii ki düzenleme işini yapmanın en mantıklı haline index.php dosyası gibi bir arayüzde önce kaydı görmek ve bir link vasıtasıyla düzenlemeye gitmektir. Buradaki amacımız size neyin nasıl olduğunu göstermek olduğundan örnek olması gibi gerçekleştirilmedi.

Şu ana kadar öğrendiklerinizle bir veritabanı yaratabilir, veritabanına bir tablo ekleyebilir, veritabanına erişimi gerçekleştirmek için bir kullanıcı atayabilir, dreamweaver ile mysql bağlantısı sağlayarak oluşturduğunuz tablodaki verileri izleyebilir, yeni veriler girebilir ve varolan verileri düzenleyebilirsiniz. Sanırım tüm bu örneklerden sonra Dreamweaver'daki application olayını kavramış ve diğer özelliklerini de kendiniz çözebilir hale gelmişsinizdir. Umarım hepiniz için faydalı olur. Sorunuz olursa lütfen çekinmeden sorun. Hepinize iyi çalışmalar.

Misafir (doğrulanmadı) on Ocak 30th 2012

çok teşekkür edrim ilaç gibi geldi ::D daha bu tür dersler varsa yardımcı ollumusunuz

Misafir on Kasım 19th 2009

teşekkür ederim benim için çok faydalı oldu

Misafir on Nisan 07th 2009

hocam elinize sağlık buraya kadar herşey çok iyi ancak mysqlde hazır db miz var içerik bakımından içi user bilgisi ile dolu peki biz bu db yi dw ile nasıl mysqlde bağlanıcaz msconnectte root ve şifre girdiğimizde sql deki databaselerimizi göremiyoruz anladığım kadarı ile illaki phpmyadminde veritabanı oluşturmak gerekiyor onca table ve user bilgisini phpmyadminde mi tanımlamak zorundayız!

orion on Nisan 08th 2009

 phpmyadmin'de tanımlamak zorunda degilsiniz, varolan mysql database'i ile de connection saglayabilirsiniz. Burada sıfırdan bir database yaratılmış, eger siz zaten bu bölümden haberdarsanız aynı database'i tekrar yaratmanıza gerek yok. dreamweaver ile direkt bağlantı kurun. yukarıda o bağlantının nasıl kurulacağıyla ilgili bilgi de mevcut.

Yeni yorum gönder

Bu alanın içeriği gizli tutulacak ve açıkta gösterilmeyecektir.
 .