Pen - FSodic.com

Insert Data to Database using JQuery, Bootstrap and Ajax

index.php

Jum, 18 Jan 2019 16:19 Fajar Sodik
  • Syntax
  • Textarea
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253
<?php
include ('./database.php');

echo 
'<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

<meta name="theme-color" content="#999" />

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<style>
.glyphicon.fast-right-spinner {
    -webkit-animation: glyphicon-spin-r 1s infinite linear;
    animation: glyphicon-spin-r 1s infinite linear;
}

.glyphicon.normal-right-spinner {
    -webkit-animation: glyphicon-spin-r 2s infinite linear;
    animation: glyphicon-spin-r 2s infinite linear;
}

.glyphicon.slow-right-spinner {
    -webkit-animation: glyphicon-spin-r 3s infinite linear;
    animation: glyphicon-spin-r 3s infinite linear;
}

.glyphicon.fast-left-spinner {
    -webkit-animation: glyphicon-spin-l 1s infinite linear;
    animation: glyphicon-spin-l 1s infinite linear;
}

.glyphicon.normal-left-spinner {
    -webkit-animation: glyphicon-spin-l 2s infinite linear;
    animation: glyphicon-spin-l 2s infinite linear;
}

.glyphicon.slow-left-spinner {
    -webkit-animation: glyphicon-spin-l 3s infinite linear;
    animation: glyphicon-spin-l 3s infinite linear;
}

@-webkit-keyframes glyphicon-spin-r {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

@keyframes glyphicon-spin-r {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

@-webkit-keyframes glyphicon-spin-l {
    0% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }

    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

@keyframes glyphicon-spin-l {
    0% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }

    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

.navbar-custom {
  background-image: linear-gradient(#dd0d0d,#cd0d0d,#bd0d0d);
}
.navbar-custom .navbar-brand {
  color: #fff;
}
.navbar-custom .navbar-nav>li>a {
  color: #fff;
  text-shadow: none;
}
.navbar-custom .navbar-nav>.active>a,
.navbar-custom .navbar-nav>li>a:hover {
  background-image: linear-gradient(#900,#900);
  color: #fff;
}
footer {
  line-height: 40px;
  background-color: #f5f5f5;
  margin-top: 20px;
}
</style>

<title>Insert Data to Database using JQuery - FSodic.com</title>

</head>

<body>

<nav class="navbar navbar-default navbar-static-top navbar-custom">

<div class="container-fluid">

<div class="navbar-header">

<button type="button" class="collapsed navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-8" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>

<a href="https://www.fsodic.com/pen/" class="navbar-brand">Pen - FSodic.com</a> </div>

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-8">

<ul class="nav navbar-nav">

<li class="active"><a href="index.php">Home</a></li>

<li><a href="https://www.fsodic.com/blog/">Blog</a></li>

<li><a href="https://www.fsodic.com/pen/">Pen</a></li>

</ul>

</div>

</div>

</nav>

<div class="produk-list">

<div class="container-fluid">

<div class="produk-list-content"><div class="alert alert-info"><span class="glyphicon glyphicon-refresh normal-right-spinner"></span> Memuat ....</div></div>

</div>

</div>

<div class="produk-tambah">

<div class="container-fluid">

<div class="msg" style="display: none;"></div>

<form action="index.php" method="POST" id="form-add">

<div class="form-group">

<label>Nama Produk</label>

<input type="text" class="form-control" name="nama_produk" required />

</div>

<div class="form-group">

<label>Stok Produk</label>

<input type="number" class="form-control" name="stok_produk" required />

</div>

<button type="submit" id="btn-add" class="btn btn-primary btn-success"><span class="glyphicon glyphicon-refresh normal-right-spinner" style="display:none;"></span> Add</button>

</form>

</div>

</div>

<footer class="footer">

<div class="container-fluid">

<p class="text-muted">&copy; <a href="https://www.fsodic.com/">FSodic.com</a></p>

</div>

</footer>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<script>$(document).ready(function(){
    $(\'.produk-list-content\').load(\'daftar_produk.php\', function(data){
        $(this).html(data);
    });
    $(document).on(\'submit\', \'form#form-add\', function(event){
        event.preventDefault();
        var formData = new FormData($(this)[0]);
        $(\'button#btn-add span.glyphicon.glyphicon-refresh\').show();
        $(\'.msg\').html(\'\');
        $(\'.msg\').hide();
        
        $.ajax({
            url: \'submit.php\',
            type: \'POST\',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response){
                $(\'.msg\').show();
                $(\'button#btn-add span.glyphicon.glyphicon-refresh\').hide();
                if(response == \'\') {
                    $(\'.msg\').html(\'<div class="alert alert-danger">Gagal mengambil data</div>\');
                } else if(response == \'added\') {
                    $(\'.msg\').html(\'<div class="alert alert-success">Produk ditambah</div>\');
                    $(\'form#form-add input\').val(\'\');
                    $(\'.produk-list-content\').html(\'<div class="alert alert-info"><span class="glyphicon glyphicon-refresh normal-right-spinner"></span> Memuat ....</div>\');
                    $(\'.produk-list-content\').load(\'daftar_produk.php\', function(data){
                        $(this).html(data);
                    });
                } else {
                    $(\'.msg\').html(response);
                }
            }
        });
    });
});</script>

</body>

</html>'
;

Pen File

Back to Top

Please use Google Chrome browser for get our best service

Google Chrome