Ders Bitti

Okuldan sonra burdayız…

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.

 


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.