Ders Bitti

Okuldan sonra burdayız…

Html Template Sitesini Php’ye Çevirme

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.

 


Yasin DURSUN

Bilişim Teknolojileri ve Yazılım Öğretmeni 2005 - 20**

2 Yorum

Murat Özkan Yayın tarihi14:48 - 16 Eylül 2017

merhabalar Yasin Bey hocam. Ben Ankara’da esnafım. İşyerim için bir web scripti indirdim internetten.

reklam scripti idi. çokda güzel. modüllerinin sadece tek biri çalışmıyor. php bişiy. sorunu hemen hemen çözdüm. küçük bir tamiratla adam edilirdi de tecrübem buna vakıf değil efendim.

Biraz yardımınızla, uygun bir fiyata halledebilirmisiniz? Hem bende scriptten anlarım az. Birlikte de yapabiliriz isterseniz. Dilerseniz scriptle kılavuzu, çalışmayan dosyaları vs anlatım vidyosu hazırlayıp atayımmı? Anlaşalım şu işte hocam. Hem bende meslek okulu mezunuyum. Scripti yapıp siz de kullanabilirsiniz. Ekmek param be hocam bu. Allah rızası için yardım ediverin

Selçuk Kayıkcı Yayın tarihi20:51 - 10 Ocak 2018

Yasin bey kolay gelsin… Öncelikle elinize kolunuza sağlık emeğiniz güzel olmuş. Web tasarımından anlamam ve bir sorunum olduğu için rahatsızlık verdim.

Arkadaşım bir proje için rastgele bir siteyi server’ın dan winttrack programı ile siteyi html olarak indirmiş ve bunu proje de kullanmak istediğini ancak .php ye çeviremesini bilmediğini söyledi. Ben de konuya vaakıf olmadığım için forumları dolaşır iken sizin bu yazdıklarınızı okudum ama bu yazılanları nereye ve nasıl .php olarak kaydedeceğimi anlamadığım için sizden yardım bekliyorum… Bir donanımcı olarak web tasarımını yapmak ya da kodlarını yazmak hakikaten zor geliyor… Umarım bana geri dönüş yaparsınız ve gerekirse indirilen html kodlarını size mail ile yollar gerekli çözümün cevabını alırım…