Özkan Özmen Web Sitesi
Çalışmak demek, boşuna yorulmak, terlemek değildir. Zamanın gereklerine göre
bilim ve teknik ve her türlü uygar buluşlardan azami derecede istifade etmek zorunludur.
Sizlere bu sayfada aktaracağım bilgiler şunu içermektedir: ilişkisel veritabanı yönetim sistemi(MySQL) ve Php programlama dili kullanılarak web tabanlı bir bilgi yönetim sistemi geliştirilirken nasıl bir yol izlemeliyiz, bu sistemi oluşturma sürecinde neler yapmamız gerektiği ile ilgili bilgi sahibi olacaksınız. Bu proje sürecinde anlatacağım sistem, bir kurumun idari mali işler bürosu tarafından kullanılmak üzere geliştirilmiş olan çoklu kullanıcı destekli satın alma takip sistemi olacak. Bu projede, satın alma bilgilerinin web tabanlı bir arayüz kullanılarak kaydedilmesi, güncellenmesi, listelenmesi ve çıktı alınması amaçlanmıştır.
Hadi şimdi böyle bir sistemi geliştirmek için işe koyulalım :)
İlişkisel veritabanı yönetim sistemi(MySQL) ve Php programlama dili kullanılarak web tabanlı bir uygulama geliştirilmesi (Satın Alma Takip Sistemi)
Web Arayüzü Hazırlama
Yorum - Soru - Görüş
Şekil0: Satın Alma Takip Sisteminin Giriş ve Yönetim Ekranları
Bu sistemi geliştirmek için bazı araçlara ve teknik bilgiye ihtiyaç vardır. Bunlar:
Etkileşim Php programlama dili ile gerçekleştirileceği için temel php bilgisi.
Temel HTML bilgisi.
Host(web alanı) ve bir domain(alan adı) ya da kişisel bilgisayarı sunucu haline getiren WampServer vb. bir program. Ben internetten ücretsiz host ve domain alarak üstüne bu sistemi yapılışını anlatacağım. İsteyenler WampServer vb. kişisel bilgisayarı sunucu haline getiren programları da tercih edebilir.
Verileri saklamak için bir MySQL veritabanı.
Neden Satın Alma Takip Sistemi?
Bir kurumun idari mali işler bürosu, satın alma bilgilerinin birçok kullanıcı tarafından eşzamanlı girilebileceği, düzenlenebileceği bir arayüze ihtiyaç duyulduğunu bana iletmiştir. Böyle bir sistemin ihtiyacının doğduğu nokta ise daha önce kullandıkları sistemde birçok kullanıcı aynı zamanda veri girişi yaptığında bazı takip numaralarında yanlışlıkların meydana gelmesidir. Bu yüzden ilgili çalışanlar ile görüşülerek bu takip sisteminde hangi menülerin olacağı ve bu menülerde ne gibi sayfaların hazırlanacağı ile ilgili senaryo hazırlanmıştır. Bu senaryo veritabanı tasarım bölümünde anlatılmıştır.
Temel HTML, php, veritabanı bilgisi olan ve web tabanlı etkileşimli bilgi sistemi yazmak isteyen herkes.
HAZIRLIK EVRESİ [Başa Dön]
Öncelikle işe bir host ve domain alarak başlayalım. Host yani web alanını ücretsiz olarak sağlayan siteler mevcut. Ben bu sitelerden http://www.hostinger.web.tr yi kullanacağım. Host ve domain almak için siteye girerek Şekil1'deki görülen "Sipariş Ver!" butonuna tıklıyoruz ve üye oluyoruz. Üye olunca otomatik olarak Php ve MySQL destekli 2000 MB alan bize veriyor.
Şekil1: Hostinger.we.tr' den Ücretsiz Hosting Sipariş Verme
Karşımıza Şekil2'deki gibi üye olma ekranı gelecektir. Buradan siteye üye oluyoruz.
Şekil2: Hostinger.we.tr Sitesine Üyelik
Hesabınız oluştuğunda aktivasyon maili geliyor. Gelen maildeki linke tıkladığımızda bizi kontrol paneline götürüyor ve Şekil3'deki görüntü ile karşılaşıyoruz. Buradan Ücretsiz bölümündeki "Sipariş Ver" butonuna tıklıyoruz.
Şekil3: Hostinger.we.tr Ücretsiz Hosting Alımı
Sonra da bir alan adına sahip isek alan adımızı giriyoruz veya hostinger.web.tr nin ücretsiz sağladığı alt alanlardan birini seçebiliriz. Ben Şekil4'te de görüldüğü üzere ücretsiz alt alanlardan ".16mb.com" seçerek satinalma.16mb.com alan adına karar verdim.
Şekil4: Alan adı Belirleme
İstediğimiz alan adını da seçtikten sonra gelen ekranda siparişi onayladığımızda "satinalma.16mb.com hesabı başarıyla oluşturulmuştur." mesajını alıyoruz ve mail gelen kutumuza hesabımız ile ilgili bilgiler geliyor. Burada yer alan FTP bilgilerini sunucuya dosyalarımızı atarken kullanacağız.
Gelen maildeki kontrol panel Url'sini kullanarak kontrol paneline giriş yaparız ve Hosting->satinalma.16mb.com(hesabınız) menüsünü kullanarak ilgili hesabımıza ait kontrol sayfasına geçeriz.
Şimdi sıra geldi bir MySQL veritabanı oluşturmaya. Bunun için kontrol panelinde Veritabanları bölümünden "MySQL Veritabanları"nı seçelim. Karşımıza Şekil5'teki gibi sayfa gelecektir.
Şekil5: MySQL Veritabanı Oluşturma
Burada veritabanı adını ve veritabanı kullanıcı adını tamamlamamızı istiyor. Şekil5'teki gibi gerekli alanları uygun şekilde doldurduktan sonra Oluştur butonuna basıyoruz. Oluşan veritabanı adı ve kullanıcısını daha sonra veritabanına bağlanma sayfasında kullanacağız.
VERİTABANI TASARIMI [Başa Dön]
Şimdi gelelim satın alma takip sistemi için bir veritabanı tasarlamaya. Yazımın ilk satırlarında yapacağımız sayfalar ile ilgili bir senaryodan bahsetmiştim. Her şeyden önce bu senaryoya çok iyi hakim olmamız gerekiyor. Çünkü sistemin işleyişini ne kadar iyi bilirsek o kadar faydalı bir sistem yazabilir ve kullanışlı bir veritabanı oluşturabiliriz.
Bu senaryonun içeriğinden bahsedecek olursak; sistemi kullanan kullanıcılar, harcama talimatı ve onaylar olmak üzere iki formu doldurarak satın alınan malların listesini tutacaklar. Burada bu iki form aynı özellikte olduğu için yalnızca harcama talimatı sayfası anlatılacaktır. Her satın alma bilgisine sistem tarafından otomatik artan bir numara verilecek. Bu bilgiler veritabanına kaydedilerek takibi, düzenlemesi yapılacak. İstenen tarih aralığında bu satın alma bilgileri çıktı alınabilecek. Kullanıcılar bir başkan tarafından yönetilecek(sisteme eklenip kaldırılabilecek). Senaryomuzdan da basitçe bahsettikten sonra bu senaryoya yönelik veritabanımızı oluşturmaya başlayalım.
Kullanacağımız veritabanı olarak yukarıda MySQL veritabanı oluşturmayı anlatmıştık. Şimdi de bu veritabanı hesabımıza bağlanıp tablolarımızı oluşturmaya başlayabiliriz. Hostinger kontrol panelinden bağlantınızı kopardıysanız eğer mailinize gelen kontrol paneli linkine tıklayarak giriş yapınız. Kontrol paneline giriş yaptıktan sonra MySQL veritabanımızı yönetmemize yarayan phpMyAdmin arayüzüne bağlanacağız.
Şekil5: MySQL Veritabanına phpMyAdmin Arayüzü İle Bağlanma
Şekil5'te görüldüğü gibi phpMyAdmin arayüzüne geçiş yapıyoruz. Bu arayüz sayesinde kod kullanmadan veritabanımızı tasarlayacağız.
Şekil6: Veritabanı Karakter Kodlaması Seçimi
Şekil6'da tablo oluşturmaya geçmeden önce yapmamız gereken önemli bir işlem var. Bu işlem karakter karşılaştırma setinin belirlenmesidir. Veritabanımızda saklanacak verilerde Türkçe karakter sorunu yaşamamak için bu işlemi yapmamız gerekiyor. Bu işlemi phpMyAdmin arayüzüne bağlanınca "Operations" menüsünün altında bulunan "Collation" bölümünden gerçekleştirebilirsiniz. Türkçe karakterleri destekleyen şu ana kadar bildiğim iki tane karakter karşılaştırma seti var, bunlar: latin5_turkish_ci ve utf8_turkish_ci. Bunlardan birini seçmek size kalmış. Ben bu sistemi için latin5_turkish_ci kullanacağım. Seçiminize göre ileride yaşayabileceğiniz bir problem şu şekilde olabilir: birincisi, latin5_turkish_ci karakter karşılaştırmasını kullanırsanız utf8 karakter kodlamasını kullanan web sayfalarınızda Türkçe karakter sorunu olabilir. Bu sorunu çözmek için ilgili sayfanın karakter setinin tanımlandığı html kodunu utf8 yerine iso-8859-9 değiştirmek gerekiyor. Bu yeterli olmadıysa ilgili sayfayı notepad++ gibi bir editör yardımı ile açıp karakter kodlamasını editörün menüsünden bularak utf8'den ANSI'ye dönüştürmek gerekiyor. Ben daha önce karşılaştığım problemleri bu yollarla aştım. Bunların yanında, bir de veritabanına bağlanma kodumuzun bulunduğu php dosyanıza aşağıdaki kodlar eklenebilir. Bunun anlamı da şudur ki veritabanı ile veri alış-verişinde karakter kodlaması olarak latin5_turkish_ci kullan. Bu kodlar:
/*Veritabanından Çekilen Veriler İçin Karakter Seti Belirleniyor*/
@mysql_query("SET NAMES `latin5`");
@mysql_query("SET CHARACTER SET latin5");
@mysql_query("SET NAMES = `latin5_turkish_ci` ");
/*Veritabanından Çekilen Veriler İçin Karakter Seti Belirleniyor Sonu*/
Eğer utf8_turkish_ci karakter karşılaştırmasını kullanmak isterseniz yukarıdaki kodda "latin5" görülen yerleri "utf8" olarak değiştirmeniz yeterlidir.
İkinci olarak utf8_turkish_ci kullanmak isterseniz yine web sayfanızda çıkabilecek Türkçe problemlerine karşılık olarak ilgili sayfanın html kodunda kullanılan karakter kodlamasını "utf8" yapmak gerekiyor. Ayrıca hala çalışmıyorsa ilgili sayfayı bir editör yardımıyla açarak karakter kodlamasını utf8'e dönüştürebilirsiniz. Şimdi artık tablolarımızı oluşturmaya geçebiliriz.
Şekil7: Kullanıcılar Tablosu Oluşturma
İlk tablo olarak kullanıcı bilgilerinin tutulacağı kullanicilar tablo yapısını oluşturalım. Bu tabloyu oluştururken 9 tane alan(sütun) kullanacağız. Yani kullanıcının 9 çeşit verisini veritabanında saklayacağız. Şimdi bu alanlara göz atalım.
Şekil8: "kullanicilar" Tablo Yapısı
"kullanicilar" tablosu için oluşturduğumuz Şekil8'de görülen alanları açıklayacak olursak; KullaniciAdi ve Parola bilgisi kullanıcıların sisteme girişi için kullanılacak. Veri türü olan "VARCHAR" metin türünden veri saklamamızı sağlar. Uzunluk olarak da belirttiğimiz miktarda karakter ilgili alana kaydolur, eğer gelen veri fazla ise fazlasını kaydedememiş oluruz. Bu yüzden mantıklı şekilde veri uzunlukları belirlenmelidir. Örneğin bu sistem Türkiye'deki telefon numaraları düşünülerek "Tel" alanına 11 karakter uzunluğu tanımlanmıştır. Yine kullanılan veri türlerinden biri de "INT" yani integer/sayısal veri saklamada kullanılır. Burada tanımlanan "Yetki" alanını kullanıcı türünü ayırt etmede kullanacağız. Örneğin eğer kullanıcı türü başkan ise yetkisi 1, normal kullanıcı ise yetkisi 0(sıfır) gibi bir karakter sayısal bir değer kaydedeceğiz. "Aktif" alanını eklememin sebebi, kullanıcıların sisteme erişimini aktif/pasif olarak belirlemek içindir. Bu alan için de kullanıcı aktif ise 1 pasif ise 0 değeri kaydedilebilir. "KayitTarihi" ve "KayitIP" alanlar ise kullanıcının sisteme eklenme tarihi ve bu işlemin yapıldığı IP adresi bilgilerinin tutulacağı alanlardır. Tarih bilgisindeki 14 karakteri oluşturan yapıda gün, ay, yıl, saat, dakika ve saniye bilgileri bitişik olarak yer almaktadır(Örn: 20140125103056). İstenirse tarihin veri türü olarak "DATE" de kullanılabilir. O zaman veriler "2015-01-25" şeklinde kaydedilecektir. Şekil8'de görüldüğü gibi bilgileri doldurduktan sonra "Save" düğmesine tıkladığımızda kullanicilar tablosunun oluştuğunu göreceğiz.
Şekil9: "kullanicilar" Tablosunda Primary ve Unique Değerler
Şekil9'da kullanicilar tablosundaki "KullaniciAdi" alanı sırasındaki özellikleriden Primary seçilmiştir. Primary Key(Birincil Anahtar) özelliği kaydedilecek her bir kaydın birbirinden ayrılmasını sağlayan, aynı değerin bir daha kullanılamadığı bir özelliktir ve her tabloda birincil anahtar özellğine sahip bir alan belirlenir. Bunun için Şekil9'da görülen "Primary" düğmesi tıklanır. Böylece örneğin T.C. kimlik numarası gibi her kullanıcının eşsiz bir kullanıcı adına sahip olması için sınırlama getirilmiş olur. Benzer şekilde "EPosta" alanında işaretlenen Unique(Eşsiz) özelliği o değerden yalnızca bir tane olabileceği anlamına geliyor. Yani aynı e-posta kullanılmasını kısıtlıyoruz. Bu ayarları da yaptıktan sonra kullanicilar tablomuz veri kaydetmeye hazır hale gelmiş oluyor.
Şimdi de HarcamaTalimati tablomuzu hazırlayalım. Bu tabloda bir malın satın alma bilgileri yer alacak ve her bir belgenin takibi için bir numara yer alacak.
Şekil10: "HarcamaTalimati" Tablo Yapısı
HarcamaTalimati tablosunu Şekil10'da görüldüğü gibi tasarlıyoruz. Şekildeki "Type" sütunundaki parantez içindeki rakamlar o alanın kaç karakter olduğunu gösterir. "ID" alanını Primary Key(Birincil Anahtar), "No" alanını da Unique(Eşsiz) olarak belirliyoruz. Buradaki "No" alanı her kayıt için sistemli bir şekilde artacak olan satın alınan malın girdi numarasıdır.
Tarih, Konu, Tutar ve HarKalemi alanları girişi yapılan malın bilgileridir. Aynı zamanda işlem tarihi, işlem yapan kişinin makine IP bilgisi ve bu işlemi hangi kullanıcının yaptığına dair tutulacak kullanıcı bilgisi yer almaktadır bu tablo yapısında. "HarKalemi" alanı normalde başka bir tabloda VARCHAR veri türünde saklanacak ve bu tabloya sadece ilgili harcama kaleminin "ID" alanındaki bilgisi yazılacak yani bu "HarKalemi" alanı veritabanı dilinde yabancı anahtar(foreign key) olarak tanımlanan bir anahtar olacaktır. Şimdi de bahsettiğimiz bu HarcamaKalemi tablomuzun yapısını oluşturalım.
Şekil11: "HarcamaKalemi" Tablo Yapısı
HarcamaKalemi tablosunu Şekil11'de görüldüğü gibi tasarladık. Bu tabloyu ayırmamızın sebebi veritabanında normalizasyonu gerçekleştirmektir. Bu sayede istediğimiz gibi harcama kalemi bilgisi ekleyip kolaylıkla kaldırabileceğiz. Böylece HarcamaTalimati tablosunda aynı veri birden fazla tekrarlanmış ise o bilgiyi değiştirdiğimizde yapacağımız çok satırdaki değişiklik yapma olayı ortadan kalkmış oluyor. Bu tabloda da yine "ID" alanını Primary olarak belirliyoruz. Buradaki Tarih,IP alanları güvenlik için konulmuştur. Bu tablo için belki gerekli olmayabilir fakat işlemleri kimin yaptığına ihtiyaç duyduğunuz bir sistem geliştireceğiniz zaman Tarihi,IP gibi bilgileri saklayarak bazen içinden çıkılamayacak durumların üstesinden kolaylıkla gelebilirsiniz. Bu tabloyu da bitirdiğimize göre veritabanı tasarım işimiz bitti diyebiliriz. Şimdi isterseniz web arayüzü olarak nasıl bir tasarım yapacağız, bunları gözden geçirelim.
WEB ARAYÜZÜ HAZIRLAMA [Başa Dön]
Şimdi Satın Alma Bilgi Sistemi için nasıl bir arayüz/şablon kullanacağız sorusuna yönelebiliriz. İnternette "html5 responsive template" diye aradığınızda ücretsiz birçok şablon bulabilirsiniz. Benim kullanacağım ise "Twitter Bootstrap" şablonu.
Bu şablonu kullanırken temel html bilginiz olması yeterlidir. Çünkü html taglarını ve form elemanları gibi birçok html kodunu çıktıları ile birlikte bize göstermektedir. Kullanacağımız bu şablonu bilgisayarımıza indirmek için önce Şekil12’da görülen sayfaya(http://getbootstrap.com/2.3.2/getting-started.html#download-bootstrap) girdikten sonra “Download Bootstrap source” butonuna tıklayarak kolaylıkla indirebiliriz.
Şekil12: Bootstrap İndirme Sayfası
Şablonu indirip zipten çıkarttıktan sonra bootstrap /docs/ klasörünün içerisinde “index.html” sayfasını tarayıcıda açarak şablonu keşfetmeye başlayabiliriz.
Şekil13: Bootstrap Örnek Sayfaları
Bu uygulamada ihtiyacımız olan Satın Alma Takip Sistemi giriş sayfası için Şekil13’deki sayfada gösterilen örnek sayfalardan “Sign in” sayfası başlangıç için ideal sayfadır diyebiliriz. Çünkü sistemi kullanacak kişiler kullanıcı adı ve parola ile sisteme giriş yapacaklar. Bu sayfayı(singin.html) /docs/examples/ klasörünün içinde bulabilirsiniz.
Sayfada bazı düzeltmeler yaparak yolumuza devam edelim.
Sayfa düzenleme deyince sayfaları düzenlemek için hangi editör programını kullanacağız sorusu aklımıza geliyor olabilir. Şekil12’da görüldüğü üzere bootstrap şablonunda bize Sublime Text 2 editörünü önermektedir. Sublime text editörüne ulaşmak isterseniz burayı(http://www.sublimetext.com/2) kullanabilirsiniz. Benim önerim ve kullandığım editör ise Notepad++ programıdır. Bu editöre için ise http://notepad-plus-plus.org/ web sitesini ziyaret ettikten sonra “download” menüsünden editörü indirebilirsiniz.
Editörünüzün hazır olduğunu varsayarak devam edelim ve "singin.html" sayfasını editörümüz ile açalım.
Şekil14: "index.php" Sayfasının Tasarımının Hazırlanması
Şekil14'ün sağ tarafında görülen bootstrap şablonu örnek sayfalarından "signin.html" sayfasıdır yukarıda bahseddiği gibi. Bootstrap şablonunu içinde yer alan /docs klasöründe bulunan sayfaları tarayıcıda açarak örnek kodlardan yararlanarak Şekil14'te sol tarafta yer alan görüntüyü elde etmeye çalışalım arakadaşlar. Amacımız böyle bir giriş sayfası oluşturmak. Bu sayfayı görsel olarak hazırlamayı size bırakıyorum. Fakat eğer bu işlere yeni başladıysanız işinizi kolaylaştıracak bir yöntem göstereyim size.
Şekil15: Tarayıcıda "Ögeyi İncele" Yardımıyla Web Sayfasını Daha Hızlı Düzenleme
Şekil15'te görülen resim ile anlatmaya çalıştığım şey, sayfanın değiştirilmek istenen yerine ulaşmak için bilgi toplama ve ona göre daha hızlı bir şekilde doğru yere ulaşıp sayfayı düzenlememize yardımcı olan, Google Chrome ve Mozilla Firefox tarayıcısında bulunan(bilmediğim diğer tarayıcılarda da olabilir) istenen ögeyi inceleme özellğidir. Bu kodları ortaya çıkarmak için web sayfasının değiştirmek istediğimiz bir yerinde(örn: bir buton veya yazı) sağ tıklıyoruz ve açılan pencereden Ögeyi İncele(Inspect Element) seçiyoruz. Görüntülen css bilgisi de sadece seçilen ögeyi etkileyen css satırlardır. Bu satırların hangi dosyada yer aldığı ve hangi satırda yer aldığı bilgileri de yer aldığı için nereyi değiştireceğim derdi biraz azalıyor bu yöntem ile.
"signin.html" sayfasını görsel anlamda hazırladığımızda artık diğer sayfaların tasarımına ve php kısımlarına sunucumuzda devam edelim. Bootstrap şablonundaki /docs klasörünü doğrudan aktaralım sunucuya. Daha sonra gerekli sayfaları oluşturduğumuzda gereksiz dosyaları temizleme yapabiliriz.
Dosyaları transfer etmeden önce http://cpanel.hostinger.web.tr/knowledgebase bilgi sayfasını bir okumanızı öneririm arkadaşlar. Burada bazı önemli sorulara açıklık getiriyorlar. Kontrol panelimizde "Dosyalar" bölümünde yer alan Ftp giriş bilgilerimizi kullanarak dosyalarımızı aktaracağız. Öncelikle bir Ftp programı kuralım bilgisayarımıza. FTP programı olarak FileZilla ya da WinSCP programlarını öneririm. WinSCP programının linkindeki sayfada aynı zamanda nasıl çalıştığını anlatan bir video da mevcut.
FTP programınızı kurduktan sonra FTP giriş bilgilerimizi yazarak sunucuya bağlanıyoruz ve bootstrap/docs/ dizini altındak tüm dosyaları public_html dizini içerisine atıyoruz. Default olarak gelen "default.php" dosyasını silebiliriz. Şimdi bir mysql bağlantı için baglanti.php dosyası oluşturalım. Bunun için örnek kodlar aşağıda verilmiştir:
/*MySQL Veritabanı Bilgileri Tanımlanıyor*/
$server="mysql_sunucu_adresi";         /*mysql host*/
$vt_name="veritabani_kullanici_adi";   /*mysql kullanıcısı*/
$vt_parola="veritabani_parola";        /*hostinger şifreniz*/
$veritabani="veritabani_adi";          /*mysql veritabanı*/
/*Sayfalarda tablo adları yerine bu değişkenler kullanılacaktır
Bu değişkenleri kullanmamın sebebi ise olur da birisi sayfamızı ele geçirirse
veritabanı tablomuzun ismini görmesin*/
/*MYSQLe Bağlanılıyor  ve VeriTabanı Seçiliyor*/
$db=mysql_connect($server,$vt_name,$vt_parola) or die(mysql_err());
Bu bağlantı dosyasındaki MySQL veritabanı bilgilerini hosting kontrol panelinizde "MySQL Veritabanları" bölümünde bulabilirsiniz. Bu dosyayı artık veritabanına bağlantı için kullanabilir duruma geldik.
Yorum - Soru - Görüş [Başa Dön]
Yorum, soru ve görüşleriniz için bana yazın.
© 2014 - 2018 Özkan Özmen