2015-11-16 17 views
5

PHP'yi öğrenmeye çalışıyorum ve Bootstrap Form sihirbazına rastladım ve denemek istedim.Bootstrap PHP Form sihirbazını sql uygulamasına ekle

Temel olarak formdan veritabanına değerleri INSERT gereken temel bir kayıt formu yaptık.

Normal formda form gönderme düğmesini kullanarak başarıyla kayıt oldum. Ancak bu sihirbazda bir gönderme düğmem yok, az sayıda araştırma ile bu tür bir formun jquery ile ele alındığını gördüm. Veritabanıma POST ile veri eklemek için bu formları nasıl kullanabilirim ve kullanmalıyım.

PHP Kodu:

<?php 
    session_start(); 
    include_once 'dbConnect.php'; 

    if(!isset($_SESSION['user'])) 
    { 
     header("Location: index.php"); 
    } 
    $res=mysql_query("SELECT * FROM emp_table WHERE user_id=". $_SESSION['user'].""); 
    $userRow=mysql_fetch_array($res);  
?> 

<!DOCTYPE html> 
<html> 
<head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width,initial-scale=1"> 
     <meta name="description" content="A fully featured admin theme which can be used to build CRM, CMS, etc."> 
     <meta name="author" content="Coderthemes"> 
     <link rel="shortcut icon" href="images/favicon_1.ico"> 
     <title>Create New Customer</title> 
     <link rel="stylesheet" type="text/css" href="plugins/jquery.steps/demo/css/jquery.steps.css"> 
     <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"> 
     <link href="css/core.css" rel="stylesheet" type="text/css"> 
     <link href="css/components.css" rel="stylesheet" type="text/css"> 
     <link href="css/icons.css" rel="stylesheet" type="text/css"> 
     <link href="css/pages.css" rel="stylesheet" type="text/css"> 
     <link href="css/responsive.css" rel="stylesheet" type="text/css"> 
     <!--[if lt IE 9]><script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
     <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script><![endif]--> 
     <script src="js/modernizr.min.js"></script> 
     <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ 
     (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 
     m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 
     })(window,document,'script','../www.google-analytics.com/analytics.js','ga'); 

     ga('create', '0', 'auto'); 
     ga('send', 'pageview'); 
     </script> 

</head> 
    <body class="fixed-left"> 

    <div id="wrapper"> 
     <div class="topbar"> 
      <?php include_once dirname(__FILE__) . '/includes/topbarleft.php'; ?> 
       <div class="navbar navbar-default" role="navigation"> 
        <div class="container"> 
         <div class=""> 
          <?php include_once dirname(__FILE__) . '/includes/topbarpullleft.php'; ?> 
          <?php include_once dirname(__FILE__) . '/includes/topbarright.php'; ?> 
           <div class="left side-menu"> 
            <div class="sidebar-inner slimscrollleft"> 
             <div class="user-details"> 
              <div class="pull-left"> 
               <img src="images/users/avatar-1.jpg" alt="" class="thumb-md img-circle"> 
              </div> 
              <div class="user-info"> 
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><?php echo $userRow['user_login_id']; ?></a> 
              <p class="text-muted m-0"><?php echo $userRow['user_role']; ?></p> 
              </div> 
             </div> 
             <div id="sidebar-menu"> 
              <ul> 
               <?php include_once dirname(__FILE__) . '/includes/menu.php'; ?> 
               <?php 
                if($userRow['user_role']=="Manager" || $userRow['user_role']=="Team Leader") 
                 { 
               ?> 
               <?php include_once dirname(__FILE__) . '/includes/menureporting.php'; ?> 
               <?php 
                 } 
               ?> 
               <?php 
                if($userRow['user_admin']=="Yes") 
                 { 
               ?> 
               <?php include_once dirname(__FILE__) . '/includes/menuadmin.php'; ?> 
               <?php 
                 } 
               ?> 
              </ul> 
              <div class="clearfix"> 
              </div> 
              <div class="clearfix"> 
              </div> 
             </div> 
            </div> 
           </div> 
         </div> 
        </div> 
       </div> 
     </div> 
     <div class="content-page"> 
      <div class="content"> 
       <div class="container"> 
        <div class="row"> 
         <div class="col-sm-12"> 
          <h4 class="page-title">Create New Customer</h4> 
           <ol class="breadcrumb"> 
            <li><a href="#">SystemTech</a></li> 
            <li><a href="#">Customers</a></li> 
            <li class="active">Create New Customer</li> 
           </ol> 
         </div> 
        </div> 
        <div class="row"> 
         <div class="col-sm-12"> 
          <div class="card-box"> 
           <h4 class="m-t-0 header-title"><b>Creating new customer</b></h4> 
            <form id="wizard-validation-form" method="post" action="createcust.php"> 
             <div> 
              <h3>Personal Detail</h3> 
               <section> 
                <div class="form-group clearfix"> 
                 <label class="col-lg-2 control-label" for="cust_first_name">First name</label> 
                  <div class="col-lg-10"> 
                  <input class="required form-control" id="cust_first_name" name="cust_first_name" type="text"> 
                  </div> 
                </div> 
                <div class="form-group clearfix"> 
                 <label class="col-lg-2 control-label" for="cust_last_name">Last Name</label> 
                  <div class="col-lg-10"> 
                  <input class="required form-control" id="cust_last_name" name="cust_last_name" type="text"> 
                  </div> 
                </div> 
                <div class="form-group clearfix"> 
                 <label class="col-lg-2 control-label" for="cust_email_id">Email ID</label> 
                  <div class="col-lg-10"> 
                  <input type="email" class="required form-control" id="cust_email_id" placeholder="Email" name="cust_email_id"> 
                  </div> 
                </div> 
               </section> 
              <h3>Contact Detail</h3> 
               <section> 
                <div class="form-group clearfix"> 
                 <label class="col-lg-2 control-label" for="cust_contact_no">Contact Number</label> 
                  <div class="col-lg-10"> 
                  <input type="text" placeholder="" data-mask="(999) 999-9999" class="required form-control" name="cust_contact_no"> <span class="font-13 text-muted">(999) 999-9999</span> 
                  </div> 
                </div> 
                <div class="form-group clearfix"> 
                 <label class="col-lg-2 control-label" for="cust_alt_contact_no">Alt. Contact Number</label> 
                  <div class="col-lg-10"> 
                  <input type="text" placeholder="" data-mask="(999) 999-9999" class="required form-control" name="cust_alt_contact_no"> <span class="font-13 text-muted">(999) 999-9999</span> 
                  </div> 
                </div> 
               </section> 
               <h3>Billing Address</h3> 
               <section> 
                <div class="form-group clearfix"> 
                 <label class="col-lg-2 control-label" for="cust_bill_addr">Address</label> 
                  <div class="col-lg-10"> 
                  <input id="cust_bill_addr" name="cust_bill_addr" type="text" class="form-control" value="Customer Address"> 
                  </div> 
                </div> 
                <div class="form-group clearfix"> 
                 <label class="col-lg-2 control-label" for="cust_country">Country</label> 
                  <div class="col-lg-10"> 
                  <input id="cust_country" name="cust_country" type="text" class="required form-control"> 
                  </div> 
                </div> 
                <div class="form-group clearfix"> 
                 <label class="col-lg-2 control-label" for="cust_state">State</label> 
                  <div class="col-lg-10"> 
                  <input id="cust_state" name="cust_state" type="text" class="required form-control"> 
                  </div> 
                </div> 
                <div class="form-group clearfix"> 
                 <label class="col-lg-2 control-label" for="cust_zip">ZIP Code</label> 
                  <div class="col-lg-10"> 
                  <input id="cust_zip" name="cust_zip" type="text" class="required form-control"> 
                  </div> 
                </div> 
               </section> 
             </div> 
            </form> 

          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

     <script>var resizefunc = [];</script> 
     <script src="js/jquery.min.js"></script> 
     <script src="js/bootstrap.min.js"></script> 
     <script src="js/detect.js"></script> 
     <script src="js/fastclick.js"></script> 
     <script src="js/jquery.slimscroll.js"></script> 
     <script src="js/jquery.blockUI.js"></script> 
     <script src="js/waves.js"></script> 
     <script src="js/wow.min.js"></script> 
     <script src="js/jquery.nicescroll.js"></script> 
     <script src="js/jquery.scrollTo.min.js"></script> 
     <script src="js/jquery.core.js"></script> 
     <script src="js/jquery.app.js"></script> 
     <script src="plugins/bootstrapvalidator/dist/js/bootstrapValidator.js" type="text/javascript"></script> 
     <script src="plugins/jquery.steps/build/jquery.steps.min.js" type="text/javascript"></script> 
     <script type="text/javascript" src="plugins/jquery-validation/dist/jquery.validate.min.js"></script> 
     <script src="pages/jquery.wizard-init.js" type="text/javascript"></script> 
     <script src="plugins/autoNumeric/autoNumeric.js" type="text/javascript"></script> 
     <script type="text/javascript">jQuery(function($) { 
     $('.autonumber').autoNumeric('init');  
     }); 
     </script> 
     <script src="plugins/bootstrap-inputmask/bootstrap-inputmask.min.js" type="text/javascript"></script> 
    </body> 
    </html> 

jQuery:

! function(a) { 
 
    "use strict"; 
 
    var b = function() {}; 
 
    b.prototype.createBasic = function(a) { 
 
     return a.children("div").steps({ 
 
      headerTag: "h3", 
 
      bodyTag: "section", 
 
      transitionEffect: "slideLeft" 
 
     }), a 
 
    }, b.prototype.createValidatorForm = function(a) { 
 
     return a.validate({ 
 
      errorPlacement: function(a, b) { 
 
       b.after(a) 
 
      } 
 
     }), a.children("div").steps({ 
 
      headerTag: "h3", 
 
      bodyTag: "section", 
 
      transitionEffect: "slideLeft", 
 
      onStepChanging: function(b, c, d) { 
 
       return a.validate().settings.ignore = ":disabled,:hidden", a.valid() 
 
      }, 
 
      onFinishing: function(b, c) { 
 
       return a.validate().settings.ignore = ":disabled", a.valid() 
 
      }, 
 
      onFinished: function(a, b) { 
 
\t \t \t \t type:"POST" 
 
       alert("Submitted!") 
 
      } 
 
     }), a 
 
    }, b.prototype.createVertical = function(a) { 
 
     return a.steps({ 
 
      headerTag: "h3", 
 
      bodyTag: "section", 
 
      transitionEffect: "fade", 
 
      stepsOrientation: "vertical" 
 
     }), a 
 
    }, b.prototype.init = function() { 
 
     this.createBasic(a("#basic-form")), this.createValidatorForm(a("#wizard-validation-form")), this.createVertical(a("#wizard-vertical")) 
 
    }, a.FormWizard = new b, a.FormWizard.Constructor = b 
 
}(window.jQuery), 
 
function(a) { 
 
    "use strict"; 
 
    a.FormWizard.init() 
 
}(window.jQuery);

+1

eski MySQL yapısı, bir karakter sql enjeksiyonları i Doğru – madalinivascu

+0

W3School sugest öğrenmek için çok daha fazla var .. Ben temelleri şeyleri anlamak ile gitmek ve ardından yeni seçeneklerini keşfetmek düşündüm. –

+0

madalin MySQL'de bu formu nasıl gönderebileceğimi lütfen önerebilirsiniz. Buraya bir başlangıç ​​yapıp, anlaşılması ve aranması gereken seçenekleri araştırıyorum. –

cevap

1

Sen serialize() formu kimliğin kullanarak ve onları kurtaracak bir php dosyasına POST üzerinden gönderebilir DB için

$.ajax({ 
      url: "save_to_db.php", 
      data: $("#form_to_send").serialize(), 
      type: "POST", 
      success: function (result) { 
      }, 
      error: function (xhr, status, errorThrown) { 
       alert("Sorry, there was a problem!"); 
       console.log("Error: " + errorThrown); 
       console.log("Status: " + status); 
       console.dir(xhr); 
      } 
     }); 

$field1 = $_POST['field1'] vb ...