PHP ile Wizard Form İşlemleri (Aşamalı Form)

Bu dersimizde PHP ile wizard form yani aşamalı form örneğini inceleyeceğiz

Merhaba arkadaşlar,

Bu benim ilk dersim, hatalarım olmuş olabilir, o yüzden affınıza sığınıyorum. Şimdiden çok teşekkürler.

Burda anlatım karışık gelenler için kaynak dosyalarını sizlerle paylaşacağım.

Veritabanımızda aşağıdaki kolonları oluşturalım. ben wizardform diye bir veritabanı oluşturdum bunun içine uyeler diye bir tablo oluşturdum. Üyeler tablosunda şunlar olacaktır.

adsoyad,kullanici,email,sifre,sirketAdi,website,sirketEposta,kartismi,kartnumarasi,adres,sehir,CreditcardMonth,CreditcardYear,Country

formToWizard.js dosyamızda aşağıdaki kodlar olacaktır.


(function($) {

    $.fn.formToWizard = function(options) {

        options = $.extend({  

            submitButton: "" 

        }, options); 

        

        var element = this;



        var steps = $(element).find("fieldset");

        var count = steps.size();

        var submmitButtonName = "#" + options.submitButton;

        $(submmitButtonName).hide();



        // 2

        $(element).before("<ul id='steps'></ul>");



        steps.each(function(i) {

            $(this).wrap("<div id='step" + i + "'></div>");

            $(this).append("<p id='step" + i + "commands'></p>");



            // 2

            var name = $(this).find("legend").html();

            $("#steps").append("<li id='stepDesc" + i + "'>Adım " + (i + 1) + "<span>" + name + "</span></li>");



            if (i == 0) {

                createNextButton(i);

                selectStep(i);

            }

            else if (i == count - 1) {

                $("#step" + i).hide();

                createPrevButton(i);

            }

            else {

                $("#step" + i).hide();

                createPrevButton(i);

                createNextButton(i);

            }

        });



        function createPrevButton(i) {

            var stepName = "step" + i;

            $("#" + stepName + "commands").append("<a href='#' id='" + stepName + "Prev' class='prev'>< Önceki Adım</a>");



            $("#" + stepName + "Prev").bind("click", function(e) {

                $("#" + stepName).hide();

                $("#step" + (i - 1)).show();

                $(submmitButtonName).hide();

                selectStep(i - 1);

            });

        }



        function createNextButton(i) {

            var stepName = "step" + i;

            $("#" + stepName + "commands").append("<a href='#' id='" + stepName + "Next' class='next'>Sonraki Adım ></a>");



            $("#" + stepName + "Next").bind("click", function(e) {

                $("#" + stepName).hide();

                $("#step" + (i + 1)).show();

                if (i + 2 == count)

                    $(submmitButtonName).show();

                selectStep(i + 1);

            });

        }



        function selectStep(i) {

            $("#steps li").removeClass("current");

            $("#stepDesc" + i).addClass("current");

        }



    }

})(jQuery);



index.php dosyamızı oluşturalım ve alttaki kodları yazalım.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

    <title>Jquery ile Aşamalı Form İşlemleri</title>

    <style type="text/css">

        body { font-family:Lucida Sans, Arial, Helvetica, Sans-Serif; font-size:13px; margin:20px;}

        #main { width:960px; margin: 0px auto; border:solid 1px #b2b3b5; -moz-border-radius:10px; padding:20px; background-color:#f6f6f6;}

        #header { text-align:center; border-bottom:solid 1px #b2b3b5; margin: 0 0 20px 0; }

        fieldset { border:none; width:320px;}

        legend { font-size:18px; margin:0px; padding:10px 0px; color:#b0232a; font-weight:bold;}

        label { display:block; margin:15px 0 5px;}

        input[type=text], input[type=password] { width:300px; padding:5px; border:solid 1px #000;}

        .prev, .next { background-color:#b0232a; padding:5px 10px; color:#fff; text-decoration:none;}

        .prev:hover, .next:hover { background-color:#000; text-decoration:none;}

        .prev { float:left;}

        .next { float:right;}

        #steps { list-style:none; width:100%; overflow:hidden; margin:0px; padding:0px;}

        #steps li {font-size:24px; float:left; padding:10px; color:#b0b1b3;}

        #steps li span {font-size:11px; display:block;}

        #steps li.current { color:#000;}

        #makeWizard { background-color:#b0232a; color:#fff; padding:5px 10px; text-decoration:none; font-size:18px;}

        #makeWizard:hover { background-color:#000;}

    </style>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

    <script type="text/javascript" src="formToWizard.js"></script>

    <script type="text/javascript">

        $(document).ready(function(){

            $("#SignupForm").formToWizard({ submitButton: 'SaveAccount' })

        });

    </script>

</head>

<body>

<div id="main">

        <form id="SignupForm" method="post"  action="">

        <fieldset>

            <legend>Kullanıcı Bilgileri</legend>

            <label for="Name">Adınız-Soyadınız</label>

            <input id="Name" name="adsoyad" type="text" />

            <label for="Name">Kullanıcı Adınız</label>

            <input id="Name" name="kullanici" type="text" />

            <label for="Email">Email</label>

            <input id="Email" name="email" type="text" />

            <label for="Password">Şifreniz</label>

            <input id="Password" name="sifre"  type="password" />

        </fieldset>

        <fieldset>

            <legend>Firma Bilgileri</legend>

            <label for="CompanyName">Şirket Adı</label>

            <input id="CompanyName" name="sirketAdi" type="text" />

            <label for="Website">Website</label>

            <input id="Website" Name="website" type="text" />

            <label for="CompanyEmail">Şirket Epostası</label>

            <input id="CompanyEmail" name="sirketEposta"  type="text" />

        </fieldset>

        <fieldset>

            <legend>Fatura Bilgileri</legend>

            <label for="NameOnCard">Kart Üzerindeki İsim</label>

            <input id="NameOnCard" name="kartismi"  type="text" />

            <label for="CardNumber">Kart Numarası</label>

            <input id="CardNumber" name="kartnumarasi"  type="text" />

            <label for="CreditcardMonth">Son Kullanma Tarihi</label>

            <select name="CreditcardMonth">

                <option value="1">1</option>

                <option value="2">2</option>

                <option value="3">3</option>

                <option value="4">4</option>

                <option value="5">5</option>

                <option value="6">6</option>

                <option value="7">7</option>

                <option value="8">8</option>

                <option value="9">9</option>

                <option value="10">10</option>

                <option value="11">11</option>

                <option value="12">12</option>

            </select>

            <select name="CreditcardYear">

                <option value="2009">2009</option>

                <option value="2010">2010</option>

                <option value="2011">2011</option>

                <option value="2012">2012</option>

                <option value="2013">2013</option>

                <option value="2014">2014</option>

                <option value="2015">2015</option>

                <option value="2016">2016</option>

                <option value="2017">2017</option>

                <option value="2018">2018</option>

                <option value="2019">2019</option>

            </select>        

            <label for="Address1">Addresiniz</label>

            <input id="Address1" name="adres"  type="text" />

            <label for="City">Şehir</label>

            <input id="City" name="sehir"   type="text" />

            <label for="City">Ülke</label>

            <select name="Country">

                <option value="CA">Canada</option>

                <option value="US">Amerika</option>

                <option value="TR">Türkiye</option>

                <option value="EN">İngiltere</option>

                <option value="FR">Fransa</option>

            </select>

        </fieldset>

        <p>

            <input id="SaveAccount" type="submit" value="Kaydı Oluştur" />

        </p>

        </form>

    </div>

</body>

</html>



Ben formu index sayfası üzerinde post ettiricem isterseniz farklı sayfada da post ettirebilirsiniz.
hemen tagının altına aşağıdaki php kodlarını yazalım.


<?php  

    
// Veritabanı İşlemleri

    
$host   "localhost";

    
$user   "root";

    
$sifre  "";

    
$db     "wizardform";

        

    
$baglan     mysql_connect($host,$user,$sifre) or die(mysql_error());

    
$vtbaglan   mysql_select_db($db,$baglan) or die(mysql_error());



    
// Türkçe Karakter Sorunu

    
mysql_query("SET COLLATION_CONNECTION = ´utf8_turkish_ci´ ");

    
mysql_query("set names utf8");



    
// Form Kaydetme İşlemleri

    
if($_POST){

    
$adsoyad        = @$_POST["adsoyad"];

    
$kullanici      = @$_POST["kullanici"];

    
$email          = @$_POST["email"];

    
$sifre          = @$_POST["sifre"];

    
$sirketAdi      = @$_POST["sirketAdi"];

    
$website        = @$_POST["website"];

    
$sirketEposta   = @$_POST["sirketEposta"];

    
$kartismi       = @$_POST["kartismi"];

    
$kartnumarasi   = @$_POST["kartnumarasi"];

    
$adres          = @$_POST["adres"];

    
$sehir          = @$_POST["sehir"];

    
$sonAy          = @$_POST["CreditcardMonth"];

    
$sonYil         = @$_POST["CreditcardYear"];

    
$ulke           = @$_POST["Country"];



    
$ekle   mysql_query("insert into urunler      

    (adsoyad,kullanici,email,sifre,sirketAdi,website,sirketEposta,kartismi,kartnumarasi,adres,sehir,CreditcardMonth,CreditcardYear,Country)                                     

    values 

    ('
$adsoyad','$kullanici',' $email','$sifre',' $sirketAdi','$website','$sirketEposta','$kartismi','$kartnumarasi','$adres','$sehir','$sonAy','$sonYil','$ulke') ");

    

    }

    
?> ?>


  • Etiketler;
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

• 6 yıl önce
Merhaba, bu aşamalı form işlemini javascript kullanmadan sadece php ile yapmanın imkanı yok mu?
• 6 yıl önce
Merhabalar, fonksiyon ve switch-case yapıları kullanılarak yapılabilir.
• 6 yıl önce
Merhabalar fonksiyon ve switch-case yapısını kullanarak bu işlemi yapabilirsiniz.
• 6 yıl önce
Evet aklıma switch ve fonksiyonlar geldi ama aşamalardaki bilgileri en son aşamaya kadar nasıl tutarız nasıl post işlemlerini yaparız bunu çözemedim. Sizin bir fikriniz var mı?
• 6 yıl önce
session ile tutacaksınız

Yukarı Git