Ders Bitti

Okuldan sonra burdayız…

Arşiv Ocak 2017

Html Template Sitesini Php’ye Çevirme

Bu yazımızda sizlere herhangi bir Html/Css template sitesini php’ye dönüştürmeyi anlatacam. Peki bu bizim ne işimize yarıyacak! 

Bir html sitesini php ye dönüştürdüğümüzde artık o siteyi düzenlemek çok daha kolay olacaktır. Bunu bir örnek site üzerinden anlatmaya başlayalım. Örnek Html sitesinin adresi: https://bootstrapmade.com/demo/MeFamily/ bu adrese gidip sağ üstte bulunan Free Download a tıklayarak sizde temayı indirebilirsiniz. Temayı indirdikten sonra tema klasörünü, php koldarını çalıştırdığımız dizine kopyalalım. Ben php kodlarını çalıştırmak için Wampserver kullandığımdan C:\wamp64\www klasörüne kopyaladım. 

Bu sitemizi incelediğimizde 5 adet sayfadan oluştuğunu görmekteyiz. Bunlar;

  • index.html
  • ourstory.html
  • events.html
  • gallery.html
  • contact.html

Bizde kod editörümüz yardımıyla 5 adet php dosyası oluşturalım. Bunlar da şöyle olsun;

  • index.php
  • hakkinda.php
  • hakkinda2.php
  • galeri.php
  • iletisim.php

Örnek temamızın kodlarını incelediğimizde 5 sayfanında üst kısmı (head) ve menü (nav) kısmı hemen hemen ayı olduğu için, </nav> kısmına kadar olan kodları kopyalayıp ust.php dosyası olarak kaydedelim.

Alt kısmınıda <footer> dan başlayıp en son yere kadar olan kısmıda alt.php alarak ayrı bir dosyaya kopyalayım.

index.php dosyamızın kodu artık şu şekilde olmalı

<?php
include “ust.php”
?>
index.html de geriye kalan tüm html kodlarını buraya yapıştırıp kaydelim.
<?php
include “alt.php”
?>
[divider]

galeri.php dosyamızda aynı mantıkla

<?php
include “ust.php”
?>
gallery.html de geriye kalan tüm html kodlarını buraya yapıştırıp kaydelim.
<?php
include “alt.php”
?>
[divider]

Aynı mantıkla diğer sayfalarıda bu şekilde düzenleyelim.

ust.php dosyasını ben bu şekilde editledim.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Me & Family Bootstrap Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="css/animate.css">
	<link rel="stylesheet" href="css/font-awesome.min.css">
	<link rel="stylesheet" href="css/jquery.bxslider.css">
	<link rel="stylesheet" type="text/css" href="css/isotope.css" media="screen" />	
	<link rel="stylesheet" href="js/fancybox/jquery.fancybox.css" type="text/css" media="screen" />
	<link href="css/style.css" rel="stylesheet">
    <!-- =======================================================
        Theme Name: MeFamily
        Theme URL: https://bootstrapmade.com/family-multipurpose-html-bootstrap-template-free/
        Author: BootstrapMade
        Author URL: https://bootstrapmade.com
    ======================================================= -->
  </head>
  <body>
	<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
		<div class="container">
			<!-- Brand and toggle get grouped for better mobile display -->
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse.collapse">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="index.html"><span>Ben & Ailem</span></a>
			</div>
			<div class="navbar-collapse collapse">							
				<div class="menu">
					<ul class="nav nav-tabs" role="tablist">
						<li role="presentation"  class="active"><a href="index.php">Ana Sayfa</a></li>
						<li role="presentation"><a href="hakkinda.php">Bizim Hakkımızda</a></li>
						<li role="presentation"><a href="hakkinda2.php">Hakkında</a></li>
						<li role="presentation"><a href="galeri.php">Galeri</a></li>
						<li role="presentation"><a href="iletisim.php">İletişim</a></li>						
					</ul>
				</div>
			</div>			
		</div>
	</nav>

 

Bundan sonra artık işimiz çok kolaylaştı. ust.php dosyamızı açıp menüyü istediğimiz gibi değiştirdiğimizde bu değişiklik diğer sayfalarda da olacaktır. Sonuçta diğer sayfalar da menüyü ust.php dosyasından alıyor. Aynı şekilde alt.php yide kendimize göre düzenlersek tüm dosyalarda değişiklik olacaktır.

Artık sizde bu basit yöntemle ile istediğiniz bir html temasını kendinize göre rahat bir şekilde düzenleyebilirsiniz. Takıldığınız yer olursa Forum bölümümüzde yardım isteyebilirsiniz.

 


Cms Nedir?

Cms (Content-Managament-System ) İçerik Yönetim Sistemleri olarak adlandırır.

Cms’ler belli bir web programlama diliyle yapılmış web sistemlerdir. Php ve Asp gibi web programlama dilleriyle oluşturulmuş birçok cms vardır.

Cms’ler genel olarak üyelik sistemi, makale ekleme, haber yazma, anket, resim galerisi, forum gibi bazı bileşenleri standart olarak içerisinde mevcuttur. En güzel tarafıda bu zaten. Böylece tek bir satır kod yazmadan kendi web sayfanızı gönlünüzce oluşturabilirsiniz.

Siz herhangi bir CMS kurulumunu yaptıktan sonra admin paneline girerek sitenize üye ekleme, makale gönderme, resim galerisi oluşturma ve bunun gibi sistemin elverdiği her şeyi yaptırabilirsiniz.

En çok kullanılan ve Php ile yazılmış içerik yönetim sistemlerinden bazıları şunlardır;

  • WordPress: Şuan görmüş olduğunuz web sayfamız gibi…
    tema
  • Joomla
    joomla
  • Drupal
    drupal
  • Php Fusion
    fusion

gibi bir çok Cms sistemleri olduğu gibi Forum sistemleri de mevcuttur. Çok yakında hazır forum sistemleri yazımızda yayınlacaktır inşallah.

 


Kod Editörleri

Web tasarımı yaparken hangi kod editörünü kullanıyorsunuz. Bu yazımızda kendi kullandığım bir kaç kod editöründen bahsetmek istiyorum. Bu programlardan bazıları;

  1. Sublime Text 3 (Ücretsiz kullanılabilir)
  2. PhpDesigner (Ücretli; 21 günlük deneme sürümü var)
  3. Notepad++ (Ücretsiz)
  4. PhpStorm (Ücretli; Deneme sürümü mevcut)
  5. Aptana (Ücretsiz)
  6. Visual Studio Code (Ücretsiz, aynı zamanda Windows, MacOs ve Linux sistemlerde de çalışır.)

Sublime Text

sublime-text

Php Designer
phpdesigner8

NotePad ++
notepad4ever

PhpStorm
phpstorm

Aptana Studio
aptana

Visual Studio Code

Yukarıda yazdığım kod editörlerinin hepsini zamanında kullandım. En çok memnun kaldıklarım ise SublimeText ve PhpDesigner kod editörleri oldu. Özellikle SublimeText programının eklentileri ile çok hızlı bir şekilde kodlarınızı yazabiliyorsunuz.

Yukarıda saydığım kod editörleri ile bir çok programların kodlarını rahatlıkla yazabilirsiniz. Bunlar; Html, Php, Css, Javascript, VBScript, C/C++, C#, Java, Visual Basic, Pascal, Assembly, SQL, Perl, Python… gibi bir çok kod yazımını desteklemektedirler.