Php

PHP Bootstrap ve Google Fonts ile Basit Hesap Makinesi Yapalım


Bu yazımızda php, bootstrap ve google fonts kullanarak ile basit bir hesap makinesi yapacağız. Bu etkinlikle temel form ve php işlemlerini, bootstrap ile container ve buton görselleri oluşturmayı, google fonts ve css kullanarak etkileyici yazılar oluşturmayı öğreneceğiz. Kaynak kodun tümüne yukarıdaki ekran görüntüsüne tıklayarak ulaştığınız sayfadan ulaşabilirsiniz (Kaynak kodu görüntülemek için sayfaya sağ tık>Kaynağı görüntüle yolunu izleyiniz). 

Şimdi 4 aşamada bu etkinliği yapalım.

1. Form içeren internet sayfası oluşturma:

Bu kısımda sayfamızın temel iskeletini oluşturuyoruz. Bu aşamada oluşturduğumuz sayfada herhangi bir işlem gerçekleşmeyecektir. Sadece işlevsiz bir form sayfası hazırlamış oluduk. Sayfaya yukarıdaki resme tıklayarak ulaşabilir ve ekran görüntüsünü görüntüleyebilirsiniz.

2. Form öğelerini Bootstrap ile biçimlendirme:

Bootstrap web sayfası öğelerinizi biçimlendirmek için geliştirilmiş bir css frameworktür. Bu çalışmada Bootstrap 4 kullanılmıştır. Bootstrap'ı kullanabilmek için web sayfanızın head etiketleri arasına aşağıdaki kodu eklemelisiniz.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

3. Başlığı Google Fonts kullanarak güzelleştirme ve css ile gölge ekleme


Yukarıdaki resimde görüldüğü gibi başlığımıza güzel bir yazı fontu verdik ve css ile gölge ekledik. Yazı tipini Google Fonts'tan ekledik. Bu tip bir yazı tipini eklemek için Google Fonts'un web sitesine gidip istediğiniz fontun bağlantısını alıp sayfanızın head etiketleri arasına eklemeniz gerekiyor. Örneğin bu çalışmada aşağıdaki bağlantı ile ilgili fontu sayfaya ekledik:

<link href="https://fonts.googleapis.com/css?family=Lobster&display=swap" rel="stylesheet">

Eklediğimiz fontu kullanabilmek için de aşağıdaki gibi css koduyla yazınızı biçimlendirebilirsimiz.

<span class="mb-0 h1" style="text-shadow: #474747 1px 2px 1px; font-family: 'Lobster', cursive;'; width:200px">Hesap Makinesi</span>

Burada kullanılan yazı tipi "Lobster". Yukarıdaki gibi yazınıza ekleyebilirsiniz. Yazıya gölge eklemiyi de css kodundaki text-shadow özelliğiyle yaptık. Burada css sayfaya dahili olarak kullanılmıştır. Web sayfası tasarımında genellikle önerilen harici css kullanılmasıdır.

4. Php kodu ile hesap makinesi işlevi ekleme


Bu aşamaya kadar sayfanın görsel tasarımını yaptık. Ekleyeceğimiz php kodu ile de sayfaya hesap makinesi işlevi ekleyeceğiz. 

Sayfaya eklenen aşağıdaki php kodu formdan gelen verileri basılan butona göre toplama, çıkarma, çarpma ya da bölme işlemlerine tabi tutmakta ve sonucu ekrana yazdırmaktadır.

 <?php
  //Butonlar basıldığında gerçekleşecekler
	if(isset($_POST['islem']))
	{
		// Girdilerin sayı olup olmadığı kontrol edilir
		if(is_numeric($_POST['sayi1']) && is_numeric($_POST['sayi2']))
		{

			if($_POST['islem'] == 'topla')
			{
				$sonuc = $_POST['sayi1'] + $_POST['sayi2'];
			}
			if($_POST['islem'] == 'cikar')
			{
				$sonuc = $_POST['sayi1'] - $_POST['sayi2'];
			}
			if($_POST['islem'] == 'carp')
			{
				$sonuc = $_POST['sayi1'] * $_POST['sayi2'];
			}
			if($_POST['islem'] == 'bol')
			{
				$sonuc = $_POST['sayi1'] / $_POST['sayi2'];
			}

			// Sonuç yazdırılır
			echo "<div  class='row'><span class='mb-0 h1' style='text-shadow: #474747 1px 2px 1px; font-family: 'Lobster', cursive;'; width:200px'>Sonuç: $sonuc </span></div>	</div>";

		} else {
			// Sayı girilmezde hata mesajı yazdırılır
			echo 'Sadece sayı giriniz	</div>';

		}
	}
?>

Bu hesap makinesi örneğiyle temel Bootstrap kullanımını, yazılarımızı Google Fonts ve css ile biçimlendirmeyi ve form öğelerini php kodlarıyla işlemeyi öğrendik. Siz de bu özellikleri kullanarak çok değişik tasarımlar yapabilirsiniz. Sağlıcakla kalın.

342 views
YORUMLAR