PHP ile şablon oluşturalım ve dosyadan başka dosya nasıl çağırılır anlayalım

Önceki yazıda dediğimiz gibi, her sayfada tekrar eden elemanları tek tek değiştirmek 10 sayfalık bir sitede eziyet gibi birşeyken, 1000 sayfalık sitede imkansız gibi birşey. Kodların sürekli tekrar edilmesini engellemek ve yeniden kullanmak, gerektiğinde tek bir dosyadan binlerce dosyayı değiştirebilmek için PHP yardımımıza koşacak. Peki bunu nasıl yapacağız? Bunun için 5 adet dosyaya ihtiyacımız var. Header.php Üstbilgi bölümlerini tutacağımız bölüm. İçeriğe kadar olan bölümdeki etiketleri burada tutacağız. Footer.php Altbilgi bölümlerini tutacağımız bölüm. Sidebar.php Yanbilgi olarak tuttuğumuz, sayfa ile içerik olarak bağlantısı olmayan bilgileri tuttuğumuz bölüm. Index.php Bütün içerik ve ihtiyacımız olan sayfaları tuttuğumuz bölüm page.php Şimdilik index.php’yi anasayfa olarak kullanabiliriz. Diğer sayfalarda da header, footer ve sidebar dosyalarını çağırabiliriz. Şu anda herhangi bir içerik yönetim sistemi veya ajax çağrısı kullanmadığımız için şimdilik bunu böyle yapalım. Şimdi her sayfada aynı olan header dosyasını görelim: <!DOCTYPE html> <html> <head...
Patreon üyelerine özel içerik.
To view this content, you must be a member of Mutlu's Patreon at "Merakli Bilişimci Üye..." or higher tier
Already a Patreon member? Refresh to access this post.

FTP ile internet sitesi yayınlama ve Son sözler

Sitemizi hazırladık. Tüm dosyalarımız hazır. Şimdi sıra geldi FTP istemcisi kullanarak bu dosyaları sunucuya yüklemeye. Eğer web sitenizi internette yayınlamak istiyorsanız öncelikle size bir hosting yani barındırma hizmeti lazım. Bunun için hosting firmalarından hizmet alabilirsiniz. Ben genellikle Mediatemple kullanıyorum. Yerli firmaları tercih etmedim ama yerli ve bu işi iyi yapan büyük ve kurumsal firmalar da var. Size tavsiyem sorun yaşamak istemiyorsanız, sunucu hizmeti veren şirketin referanslarına bakmanız. Bu işlerde fiyat sizin için avantaj olmasın. Sonra binbir emekle yaptığınız internet sitesinin dosyaları veya veritabanı oratadan kayboldursa, binlerce dolarlık zararın telafisi mümkün olmaz ve bir özür alırsınız. Biz PHP ile geliştirme yapacağımız için Linux sunucu almamız gerekiyor. Sunucumuzu satın aldıktan sonra 3 tane bilgiye ihtiyacımız olacak. Sunucu adresi: Sunucumuza ftp istemcisi kullanarak erişmemizi sağlayacak adres. Kullanıcı adı: Sunucu üzerinde ftp ile oturum açmamıza yaran kullanıcı ismi. Kullanıcı şifresi: Oturum açarken kullanacağımız parola. Bunlar sunu...
Patreon üyelerine özel içerik.
To view this content, you must be a member of Mutlu's Patreon at "Merakli Bilişimci Üye..." or higher tier
Already a Patreon member? Refresh to access this post.

Yayınlama öncesi son düzeltmeleri de yapalım

Aslında neredeyse her şey hazır. Yapmamız gereken bir kaç düzeltme var. Bu tarz düzeltmeler hazırlayacağınız projelerde sizin de başınıza sıkça gelecek. Bu nedenle ben de böyle bir yazı hazırlamayı uygun buldum. Daha önce yaptığımız tasaırmla ilgili bir kaç tane göze çarpan nokta mevcut. Bazı yan listelerin simetrik görünmemesi durumu. Bir kaç tane örnek verelim. Bunlara siz de tasarımlarınızda dikkat etmelisiniz. Aslında en baştan temiz bir grid yani ızgara sistemi kullanmanızı öneririm. Kitabımızın konusu Kullanıcı Arayüzü (User Interface) tasarımı olmadığı için bu konulara girmeyeceğiz şimdilik. Burada gördüğümüz asimetrik farklılıkları düzenlememiz lazım. Bunun için header kısmında kullandığımız ölçeği tüm sayfalarda kullanarak işe başlayabiliriz. Header kısmında logo ve nav bölümleri için kullandığımız temel ölçü 4 birime 8 birim. Biz de diğer sayfalarımızı bu ölçüye göre ayıracağız. Ana sayfadaki bilgiler kısmını ve footer bölümünün yapısını da biraz değiştirmemiz gerekiyor. Sayfalarda altın oranın (1/1.618) dışındaki her türlü asimetrik görüntü gözü çok yorar. Bir ipucu olarak...
Patreon üyelerine özel içerik.
To view this content, you must be a member of Mutlu's Patreon at "Merakli Bilişimci Üye..." or higher tier
Already a Patreon member? Refresh to access this post.

Yeni Türk Tücaret Kanunu’nun Gerektirdiği Kurumsal Bilgiler Bölümünü Bitirelim ve Sitemizi Tamamlayalım

Evet sitemiz ufak ufak bitiyor. Son olarak yeni Türk Ticaret Kanunu’nun gerektirdiği kurumsal bilgileri içeren Kurumsal bölümümüzü de yaptıktan sonra html5 ile hazırladığımız şirket internet sitesi örneğimizi bitiriyoruz. Peki kurumsal bölümüne eklememiz gereken bilgiler nelerdir? Yeni TTK bizden neler istiyor? Şurada ve şurada belirtildiği üzere ilk olarak şirket ile ilgili temel bilgileri eklememiz gerekiyor. Bunlar; Ticaret Ünvanı (Ticaret Sicilinde belirtildiği gibi) Ticaret Sicil No. Bağlı olunan ticaret odası Kuruluş Tarihi Yetkili Müdürlerin Adı Soyadı Bu bilgileri güzel bir şekilde görüntülemek için tablo kullanalım: <table class="table table-hover"> <tr> <td><strong>Ticaret Ünvanı</strong>: </td> <td>Kızılyıldız Matbaacılık A.Ş.</td> </tr> <tr> <td><strong>Ticaret Sicil No</strong>: </td> <td>283723-23498-2434</td> </tr> <tr> <td><strong>Bağlı Olunan Ticaret Odası</strong>: </td> <td>İstanbul Matbaacılar Odası</td> </tr>...
Patreon üyelerine özel içerik.
To view this content, you must be a member of Mutlu's Patreon at "Merakli Bilişimci Üye..." or higher tier
Already a Patreon member? Refresh to access this post.

Duyurular bölümünü bitirelim (blog)

Duyurular bölümünü tıpkı daha önce hakkımızda bölümünde yaptığımız gibi section ve article olarak kuracağız. Fakat burada fark şu olacak. Duyurular bölümünü tıpkı bir blog gibi oluşturacağız. Herhangi bir navigasyon olmasına gerek yok. Aşağıya doğru kaydırdıkça makaleleri görebileceğiz. İstersek sadece liste gibi veya makale özeti koyup devamını gör linkini de koyabiliriz ama gerek yok. Bunun yerine biz tıpkı bir wordpress blogu gibi makaleleri koyacağız. Hakkımızda bölümünün ilk halini hatırlıyorsunuz değil mi? Duyurular bölümü de aşağı yukarı ona benzeyecek. Peki yapımızı nasıl belirleyeceğiz? Bunun için Schema.org‘a göz atarak şöyle bir yapı oluşturuyoruz. <article name="blogpost" itemscope="" itemtype="http://schema.org/BlogPosting"> <header> <a name="makale"><h2 itemprop="name headline">Makale Başlığı</h2></a> <time datetime="2012-10-18" itemprop="datePublished">18 Ekim 2012</time> tarihinde yayınlandı. </header> <div itemprop="articleBody"> <p> Makale İçeriği </p> </div> </div> İtemtype öz...
Patreon üyelerine özel içerik.
To view this content, you must be a member of Mutlu's Patreon at "Merakli Bilişimci Üye..." or higher tier
Already a Patreon member? Refresh to access this post.

İçerik bölümlerini ekleyelim

Geriye 3 tane bölümümüz kaldı. Daha sonra sitemiz bitiyor. Hakkımızda, Duyurular ve Kurumsal bölümlerini oluşturacağız. http://html5doctor.com/designing-a-blog-with-html5/ Hakkımızda bölümü üç ayrı yazıdan oluşacak. Şirketimiz hakkında, referanslar, tarihçe ve kalite felsefemiz. Bunları tek bir bölümde (section) ama 3 ayrı makalede oluşturacağız. Duyurular bölümü ise bir blog gibi olacak. Tıpkı facebook veya twitter’da paylaşıldığı gibi haber formatında olacak. Devam linkine tıklandığında yazının devamı görülecek. Kurumsal bölümü ise şirket ile ilgili bilgileri barındıracak. Yine blog gibi çalışacak. Kenarda en son makalelerin başlantılarını içeren bir bağlantı listesi olacak. Burada da şirketin finansal tabloları gibi TTK’nın emrettiği kurumsal bilgileri barındıracağız. Şimdi hakkımızda bölümünün makaleleri ile işe başlayalım ve boş bir makale oluşturalım. Makalelerimizin yine Google tarafından tanıması için microdata kullanacağız. <section> <article itemscope itemtype="http://schema.org/Article"> <header> <span itemprop="name"><a name="baslik"...
Patreon üyelerine özel içerik.
To view this content, you must be a member of Mutlu's Patreon at "Merakli Bilişimci Üye..." or higher tier
Already a Patreon member? Refresh to access this post.

İletişim bölümünü oluşturalım ve HTML formlarını anlayalım

Tek ürün gösteren veya sipariş vermeyi sağlayan sayfayı yapmadan önce, saitemizin belki de en önemli bölümü olan iletişim bölümümüzü yapmamız gerekiyor. İletişim bölümü sitemizin en önemli bölümüdür. Genellikle firmaların internet sitelerine giren insanlar sadece bu bölüm için sayfayı açarlar. Aradıkları şey genellikle telefon numarası, adres, e-posta veya daha da önemlisi mesajlarını direk yollayabilecekleri bir iletişim formudur. Bu bölümü oluşturmak için ihtiyacımız olan bilgiler neler? Adres Telefon E-posta adresleri İletişim Formu İletişim formunda ihtiyacımız olan nedir? Gönderen kişinin adı, soyadı Geri dönüş yapmak için e-posta adresi Gönderilecek mesaj İletişim ile ilgili bilgileri vereceğiz. Burada çok önemli bir noktaya geldik. Meta etiketleri bölümünde belirttiğimiz anahtar kelimeler Google veya diğer arama motorları tarafından o kadar da dikkate alınmıyor. Şaşırdınız değil mi? Maalesef öyle. Meta description yani açıklama dikkate alınıyor, ama anahtar kelimelere ne kadar önem addedildiği meçhul. Google kullanmadığını söylüyor, ya da çok suistimal edildiği için böyle bili...
Patreon üyelerine özel içerik.
To view this content, you must be a member of Mutlu's Patreon at "Merakli Bilişimci Üye..." or higher tier
Already a Patreon member? Refresh to access this post.

Ürünler sayfamızı oluşturalım

Bir önceki yazıda anasayfamızı tamamlamış, bölümlerimizi oluşturmaya başlayacağımızı söylemiştik. İlk olarak ürünler bölümüyle başlayacağız. Ürünler sayfamızda birden çok kategori içinde, birden fazla ürünü aynı anda görmemiz gerekiyor. Bunun için kategoriler arasında gezinmemizi sağlayan bir bağlantılar listesine ihtiyacımız var ilk olarak. <div class="span3 yanliste"> <ul class="nav nav-list"> <li>Kategoriler</li> <hr> <li><a href="ajanda.html">Ajandalar</a></li> <li><a href="poster.html">Posterler</a></li> <li><a href="davetiye.html">Davetiyeler</a></li> <li><a href="elilani.html">El ilanları</a></li> </ul> </div> hr etiketi gözünüze çarptıysa o etiketler arasında çizgi çekebilmemizi sağlayan etiket. Tabii listemizin güzel de görünmesini istiyoruz. Bunun için custom.css’in sonuna şöyle bir kod daha ekleyelim: .yanliste { background-color: #f5f5f1; margin-bottom: 10px; padding: 14px 0; -moz-border-radius: 5px; -webkit-border-radius: 5px; bo...
Patreon üyelerine özel içerik.
To view this content, you must be a member of Mutlu's Patreon at "Merakli Bilişimci Üye..." or higher tier
Already a Patreon member? Refresh to access this post.

İçerik ve alt bilgi kısımlarını da Bootstrap için uygun hale getirelim

Genellikle bu tarz şirket sayfalarında ürünleri ya da hizmetleri gösteren 940 piksel genişliğinde bir ana resim bulunur. Bizim de elimizde şöyle bir resim olsun: Bu resmi icerik adlı section etiketimizin hemen altına anaResim adlı div kutusunun içine yerleştireceğiz ki ilk mesajımızın hemen üstünde ama üs kısımın da hemen altında bulunsun. <div id="anaResim"><img src="anaResim.jpg" alt="Ana Resim"/></div> Daha sonra mesaj kısmının olduğu yeri ve altında bulunan bilgi kısmındaki article’ları yerleştirmemiz gerekiyor. Geniş mesajımız tüm sayfayı kaplasın, ürünlere göz atın linkimiz de hemen altında yeralsın. Daha önce yaptığımız gibi satırları oluşturalım. <div id="mesaj"> <div class="row"> <div class="span12"> <h1><strong>İstanbul'daki en hızlı, en kaliteli ve en uygun fiyatlı matbaayı mı arıyorsunuz?</strong></h1> </div> </div> <div class="row"> <div id="inceleyin" class="span4 offset8"> <a class="btn btn-primary btn-large" href="urunler.html">Ürünlerimizi inceleyin</a> </div>...
Patreon üyelerine özel içerik.
To view this content, you must be a member of Mutlu's Patreon at "Merakli Bilişimci Üye..." or higher tier
Already a Patreon member? Refresh to access this post.

Sayfamızı Twitter Bootstrap ile mükemmelleştirelim

Twitter Bootstrap kütüphanesini kullanmaya başlamadan önce bu kütüphanenin çalışma mantığıyla ilgili bilmemiz gereken birkaç şey var. Bu kütüphane, etiketlerin class özelliklerine eklediğimiz görevleri görüyor ve bunların görünümünü bu görevlere göre otomatik olarak değştiriyor. Biraz daha açalım. <div class="container"></div> Kütüphanemizin mantığı 960 piksel üzerine kurulu demiştik. Bootstrap bu 960 pikseli 12’ye bölerek çalışıyor. Öncelikle bu sistemi kullanabilmemiz için kök eleman belirlemeliyiz ki, hem sayfayı ortalayalım, hem boyu 960 olsun, hem de istediğimiz gibi bölebilelim. İşte bunun için yukarıdaki container sınıfına sahip olan div elemanını kullanacağız. Kök elemanını oluşturduktan sonra, her 12’ye böldüğümüz ve kutularla doldurduğumuz sıra için bir de satır elemanı oluşturmamız gerekiyor. <div class="container"> <div class="row"></div> </div> Bu satır elemanlarını da artık istediğimiz gibi kutularla doldurabiliriz. <div class="container"> <div class="row"> <div class="span4">4</div> <div class="...
Patreon üyelerine özel içerik.
To view this content, you must be a member of Mutlu's Patreon at "Merakli Bilişimci Üye..." or higher tier
Already a Patreon member? Refresh to access this post.