623 lines
19 KiB
PHP
623 lines
19 KiB
PHP
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Karan — Pemesanan Desain Grafis</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
|
|
<link href="https://fonts.googleapis.com/css?family=Quicksand:300,400,500,700,900" rel="stylesheet">
|
|
<link rel="stylesheet" href="http://localhost:8080/penjualan/fonts/icomoon/style.css">
|
|
|
|
<link rel="stylesheet" href="http://localhost:8080/penjualan/css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="http://localhost:8080/penjualan/css/magnific-popup.css">
|
|
<link rel="stylesheet" href="http://localhost:8080/penjualan/css/jquery-ui.css">
|
|
<link rel="stylesheet" href="http://localhost:8080/penjualan/css/owl.carousel.min.css">
|
|
<link rel="stylesheet" href="http://localhost:8080/penjualan/css/owl.theme.default.min.css">
|
|
|
|
<link rel="stylesheet" href="http://localhost:8080/penjualan/css/bootstrap-datepicker.css">
|
|
|
|
<link rel="stylesheet" href="http://localhost:8080/penjualan/fonts/flaticon/font/flaticon.css">
|
|
|
|
<link rel="stylesheet" href="http://localhost:8080/penjualan/css/aos.css">
|
|
|
|
<link rel="stylesheet" href="http://localhost:8080/penjualan/css/style.css">
|
|
|
|
<link rel="stylesheet" href="http://localhost:8080/penjualan/assets/plugin/sweet-alert/sweetalert.css">
|
|
|
|
<script src="http://localhost:8080/penjualan/assets/plugin/sweet-alert/sweetalert.min.js"></script>
|
|
|
|
<link rel="stylesheet" type="text/css" href="http://localhost:8080/penjualan/assets/plugin/datatables/jquery.dataTables.min.css">
|
|
|
|
<style>
|
|
/*body {font-family: Arial;}*/
|
|
|
|
/* Style the tab */
|
|
.tab {
|
|
overflow: hidden;
|
|
border: 1px solid #ccc;
|
|
background-color: #f1f1f1;
|
|
}
|
|
|
|
/* Style the buttons inside the tab */
|
|
.tab button {
|
|
background-color: inherit;
|
|
float: left;
|
|
border: none;
|
|
outline: none;
|
|
cursor: pointer;
|
|
padding: 14px 16px;
|
|
transition: 0.3s;
|
|
font-size: 17px;
|
|
}
|
|
|
|
/* Change background color of buttons on hover */
|
|
.tab button:hover {
|
|
background-color: #ddd;
|
|
}
|
|
|
|
/* Create an active/current tablink class */
|
|
.tab button.active {
|
|
background-color: #ccc;
|
|
}
|
|
|
|
/* Style the tab content */
|
|
.tabcontent {
|
|
display: none;
|
|
padding: 6px 12px;
|
|
-webkit-animation: fadeEffect 1s;
|
|
animation: fadeEffect 1s;
|
|
/*border: 1px solid #ccc;*/
|
|
}
|
|
|
|
/* Fade in tabs */
|
|
@-webkit-keyframes fadeEffect {
|
|
from {opacity: 0;}
|
|
to {opacity: 1;}
|
|
}
|
|
|
|
@keyframes fadeEffect {
|
|
from {opacity: 0;}
|
|
to {opacity: 1;}
|
|
}
|
|
</style>
|
|
|
|
<style>
|
|
#img5 {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
#img6 {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
#img13 {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
#img16 {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
#img18 {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
#img25 {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
#img26 {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
#img29 {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
#img30 {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
#img31 {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
#img32 {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
#img33 {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
#img34 {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
</style>
|
|
|
|
<style>
|
|
#image-preview{
|
|
display:none;
|
|
width : 100%;
|
|
height : 100%;
|
|
}
|
|
</style>
|
|
<style>
|
|
/*body {font-family: Arial, Helvetica, sans-serif;}*/
|
|
|
|
#myImg {
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
#myImg:hover {opacity: 0.7;}
|
|
|
|
/* The Modal (background) */
|
|
.modal {
|
|
display: none; /* Hidden by default */
|
|
position: fixed; /* Stay in place */
|
|
z-index: 1; /* Sit on top */
|
|
padding-top: 100px; /* Location of the box */
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%; /* Full width */
|
|
height: 100%; /* Full height */
|
|
overflow: auto; /* Enable scroll if needed */
|
|
background-color: rgb(0,0,0); /* Fallback color */
|
|
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
|
|
}
|
|
|
|
/* Modal Content (image) */
|
|
.modal-content {
|
|
margin: auto;
|
|
display: block;
|
|
width: 80%;
|
|
max-width: 700px;
|
|
}
|
|
|
|
/* Caption of Modal Image */
|
|
#caption {
|
|
margin: auto;
|
|
display: block;
|
|
width: 80%;
|
|
max-width: 700px;
|
|
text-align: center;
|
|
color: #ccc;
|
|
padding: 10px 0;
|
|
height: 150px;
|
|
}
|
|
|
|
/* Add Animation */
|
|
.modal-content, #caption {
|
|
-webkit-animation-name: zoom;
|
|
-webkit-animation-duration: 0.6s;
|
|
animation-name: zoom;
|
|
animation-duration: 0.6s;
|
|
}
|
|
|
|
@-webkit-keyframes zoom {
|
|
from {-webkit-transform:scale(0)}
|
|
to {-webkit-transform:scale(1)}
|
|
}
|
|
|
|
@keyframes zoom {
|
|
from {transform:scale(0)}
|
|
to {transform:scale(1)}
|
|
}
|
|
|
|
/* The Close Button */
|
|
.close {
|
|
position: absolute;
|
|
top: 15px;
|
|
right: 35px;
|
|
color: #f1f1f1;
|
|
font-size: 40px;
|
|
font-weight: bold;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.close:hover,
|
|
.close:focus {
|
|
color: #bbb;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* 100% Image Width on Smaller Screens */
|
|
@media only screen and (max-width: 700px){
|
|
.modal-content {
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
|
|
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<div class="site-wrap">
|
|
|
|
<div class="site-mobile-menu">
|
|
<div class="site-mobile-menu-header">
|
|
<div class="site-mobile-menu-close mt-3">
|
|
<span class="icon-close2 js-menu-toggle"></span>
|
|
</div>
|
|
</div>
|
|
<div class="site-mobile-menu-body"></div>
|
|
</div>
|
|
<div class="border-bottom top-bar py-2">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<p class="mb-0">
|
|
<span class="mr-3"><strong>Phone:</strong> <a href="tel://#">+1 292 3293 4238</a></span>
|
|
<span><strong>Email:</strong> <a href="#">info@yourdomain.com</a></span>
|
|
</p>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<ul class="social-media">
|
|
<li><a href="#" class="p-2"><span class="icon-facebook"></span></a></li>
|
|
<li><a href="#" class="p-2"><span class="icon-twitter"></span></a></li>
|
|
<li><a href="#" class="p-2"><span class="icon-instagram"></span></a></li>
|
|
<li><a href="#" class="p-2"><span class="icon-linkedin"></span></a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<header class="site-navbar py-4 bg-white" role="banner">
|
|
|
|
<div class="container">
|
|
<div class="row align-items-center">
|
|
|
|
<div class="col-11 col-xl-2">
|
|
<h1 class="mb-0 site-logo"><a href="index.html" class="text-black h2 mb-0">Halaman Pesanan</a></h1>
|
|
</div>
|
|
<div class="col-12 col-md-10 d-none d-xl-block">
|
|
<nav class="site-navigation position-relative text-right" role="navigation">
|
|
|
|
<ul class="site-menu js-clone-nav mr-auto d-none d-lg-block">
|
|
<li ><a href="http://localhost:8080/penjualan/user">Halaman Utama</a></li>
|
|
<li class="active"><a href="http://localhost:8080/penjualan/user/pesanan">Pesanan</a></li>
|
|
<li ><a href="http://localhost:8080/penjualan/user/pengembalian">Pengembalian</a></li>
|
|
|
|
<li ><a href="http://localhost:8080/penjualan/user/user">Nama User</a></li>
|
|
|
|
<li ><a href="http://localhost:8080/penjualan/user/logout">Logout</a></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
|
|
|
|
<div class="d-inline-block d-xl-none ml-md-0 mr-auto py-3" style="position: relative; top: 3px;"><a href="#" class="site-menu-toggle js-menu-toggle text-black"><span class="icon-menu h3"></span></a></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</header>
|
|
|
|
|
|
<div class="site-blocks-cover inner-page-cover overlay" style="background-image: url(http://localhost:8080/penjualan/images/hero_1.jpg);" data-aos="fade" data-stellar-background-ratio="0.5">
|
|
<div class="container">
|
|
<div class="row align-items-center justify-content-center text-center">
|
|
|
|
<div class="col-md-12" data-aos="fade-up" data-aos-delay="400">
|
|
|
|
<div class="row justify-content-center mb-4">
|
|
<div class="col-md-8 text-center">
|
|
<h1>Pembuatan Desain Grafis</h1>
|
|
<p class="lead mb-5">Kami Membuat Desain Grafis Yang Terbaik</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<section class="site-section">
|
|
<div class="container">
|
|
<div class="row">
|
|
|
|
<div class="col-md-12">
|
|
<div class="col-md-12 col-lg-12">
|
|
<div class="card-content" style="overflow-x: auto">
|
|
<div class="form-horizontal">
|
|
<table id="tabel-data" class="table table-striped table-bordered display" style="width:100%">
|
|
<thead>
|
|
<tr align="center">
|
|
<th>No</th>
|
|
<th>Waktu Pembelian</th>
|
|
<th width="12%" align="center">Desain</th>
|
|
<th>Harga</th>
|
|
<!-- <th>Status</th>
|
|
<th>Aksi</th> -->
|
|
|
|
</tr>
|
|
</thead>
|
|
|
|
</table>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer class="site-footer">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="row">
|
|
<div class="col-md-7">
|
|
<h2 class="footer-heading mb-4">Tentang Kami</h2>
|
|
<p>Membangun Website yang menyediakan jasa pembuatan dan pencetakan desain grafis </p>
|
|
</div>
|
|
<!-- <div class="col-md-3 ml-auto">
|
|
<h2 class="footer-heading mb-4">Features</h2>
|
|
<ul class="list-unstyled">
|
|
<li><a href="#">About Us</a></li>
|
|
<li><a href="#">Services</a></li>
|
|
<li><a href="#">Testimonials</a></li>
|
|
<li><a href="#">Contact Us</a></li>
|
|
</ul>
|
|
</div> -->
|
|
<div class="col-md-5">
|
|
<h2 class="footer-heading mb-4">Follow Us</h2>
|
|
<a href="#" class="pl-0 pr-3"><span class="icon-facebook"></span></a>
|
|
<a href="#" class="pl-3 pr-3"><span class="icon-twitter"></span></a>
|
|
<a href="#" class="pl-3 pr-3"><span class="icon-instagram"></span></a>
|
|
<a href="#" class="pl-3 pr-3"><span class="icon-linkedin"></span></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="row pt-5 mt-5 text-center">
|
|
<div class="col-md-12">
|
|
<div class="border-top pt-5">
|
|
<p>
|
|
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
|
|
Copyright ©<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="icon-heart" aria-hidden="true"></i> by <a href="https://www.facebook.com/kicap.karan" target="_blank" >Kicap Karan</a>
|
|
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
<script src="http://localhost:8080/penjualan/js/jquery-3.3.1.min.js"></script>
|
|
<script src="http://localhost:8080/penjualan/js/jquery-migrate-3.0.1.min.js"></script>
|
|
<script src="http://localhost:8080/penjualan/js/jquery-ui.js"></script>
|
|
<script src="http://localhost:8080/penjualan/js/popper.min.js"></script>
|
|
<script src="http://localhost:8080/penjualan/js/bootstrap.min.js"></script>
|
|
<script src="http://localhost:8080/penjualan/js/owl.carousel.min.js"></script>
|
|
<script src="http://localhost:8080/penjualan/js/jquery.stellar.min.js"></script>
|
|
<script src="http://localhost:8080/penjualan/js/jquery.countdown.min.js"></script>
|
|
<script src="http://localhost:8080/penjualan/js/jquery.magnific-popup.min.js"></script>
|
|
<script src="http://localhost:8080/penjualan/js/bootstrap-datepicker.min.js"></script>
|
|
<script src="http://localhost:8080/penjualan/js/aos.js"></script>
|
|
|
|
<script src="http://localhost:8080/penjualan/js/typed.js"></script>
|
|
|
|
<script type="text/javascript" src="http://localhost:8080/penjualan/assets/plugin/datatables/jquery.dataTables.min.js"></script>
|
|
|
|
<script src="http://localhost:8080/penjualan/assets/plugin/toastr/toastr.min.js"></script>
|
|
<link rel="stylesheet" type="text/css" href="http://localhost:8080/penjualan/assets/plugin/toastr/toastr.css">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- <script>
|
|
$(document).ready(function(){
|
|
$('#tabel-data').DataTable({
|
|
"aLengthMenu": [[10, 20, 30, ,40, -1], [10, 20, 30, 40 ,"All"]],
|
|
"iDisplayLength": 10,
|
|
// "pageLength": 5,
|
|
"searching": true,
|
|
"paging": true,
|
|
"ordering": true,
|
|
"info": false,
|
|
|
|
});
|
|
|
|
});
|
|
</script> -->
|
|
|
|
<!-- <script type="text/javascript">
|
|
|
|
var save_method; //for save method string
|
|
var table;
|
|
|
|
$(document).ready(function() {
|
|
//datatables
|
|
table = $('#tabel-data').DataTable({
|
|
"aLengthMenu": [[5, 10, 15, ,20, -1], [5, 10, 15, 20 ,"All"]],
|
|
"iDisplayLength": 5,
|
|
// "pageLength": 5,
|
|
"searching": true,
|
|
"paging": true,
|
|
"ordering": true,
|
|
"info": false,
|
|
"processing": true, //Feature control the processing indicator.
|
|
"serverSide": true, //Feature control DataTables' server-side processing mode.
|
|
// "order": [], //Initial no order.
|
|
// Load data for the table's content from an Ajax source
|
|
"ajax": {
|
|
"url": '<?php echo site_url('try2/json'); ?>',
|
|
"type": "POST"
|
|
},
|
|
//Set column definition initialisation properties.
|
|
"columns": [
|
|
{"data": 0},
|
|
{"data": 1},
|
|
{"data": 2},
|
|
{"data": 3}
|
|
// {"data": 4},
|
|
// {"data": 5}
|
|
],
|
|
|
|
});
|
|
|
|
});
|
|
</script> -->
|
|
|
|
<script type="text/javascript">
|
|
$(document).ready(function() {
|
|
$('#tabel-data').DataTable( {
|
|
"processing": true,
|
|
"serverSide": true,
|
|
"ajax": "<?php echo site_url('try2/json1'); ?>"
|
|
} );
|
|
} );
|
|
</script>
|
|
|
|
<script type="text/javascript">
|
|
function previewImage() {
|
|
document.getElementById("image-preview").style.display = "block";
|
|
var oFReader = new FileReader();
|
|
oFReader.readAsDataURL(document.getElementById("imagesource").files[0]);
|
|
|
|
oFReader.onload = function(oFREvent) {
|
|
document.getElementById("image-preview").src = oFREvent.target.result;
|
|
};
|
|
};
|
|
</script>
|
|
|
|
|
|
<script type="text/javascript">
|
|
function upload(){
|
|
|
|
var file_data = $('#imagesource').prop('files')[0];
|
|
var form_data = new FormData();
|
|
form_data.append('file', file_data);
|
|
// form_data.append('no', );
|
|
// console.log(form_data);
|
|
var file = document.getElementById('imagesource').files[0];
|
|
var le=file['name'].length;
|
|
var poin=file['name'].lastIndexOf(".");
|
|
var accu1=file['name'].substring(poin,le);
|
|
var accu = accu1.toLowerCase();
|
|
console.log(accu);
|
|
|
|
if (accu == '.png' || accu == '.jpg') {
|
|
console.log('benar');
|
|
}else{
|
|
console.log('salah');
|
|
}
|
|
|
|
if (document.getElementById('imagesource').value == "") {
|
|
toastr.options = {
|
|
"closeButton": true,
|
|
"debug": false,
|
|
"progressBar": true,
|
|
"positionClass": "toast-top-right",
|
|
"showDuration": "300",
|
|
"hideDuration": "1000",
|
|
"timeOut": "5000",
|
|
"extendedTimeOut": "1000",
|
|
"showEasing": "swing",
|
|
"hideEasing": "linear",
|
|
"showMethod": "fadeIn",
|
|
"hideMethod": "fadeOut"
|
|
};
|
|
|
|
|
|
toastr.error("Foto Harus Dipilih");
|
|
document.getElementById('imagesource').focus() ;
|
|
}else if(file && file.size > 1800000){
|
|
toastr.options = {
|
|
"closeButton": true,
|
|
"debug": false,
|
|
"progressBar": true,
|
|
"positionClass": "toast-top-right",
|
|
"showDuration": "300",
|
|
"hideDuration": "1000",
|
|
"timeOut": "5000",
|
|
"extendedTimeOut": "1000",
|
|
"showEasing": "swing",
|
|
"hideEasing": "linear",
|
|
"showMethod": "fadeIn",
|
|
"hideMethod": "fadeOut"
|
|
};
|
|
|
|
|
|
toastr.error("Saiz Foto Maksimal 1.5 Mb");
|
|
document.getElementById('imagesource').focus() ;
|
|
}else if (accu == '.png' || accu == '.jpg'){
|
|
$.ajax({
|
|
cache: false,
|
|
contentType: false,
|
|
processData: false,
|
|
type: "post",
|
|
url: "http://localhost:8080/penjualan/user/pesanan/upload_foto_transaksi/",
|
|
data: form_data,
|
|
// data: {foto : file}, // appears as $_GET['id'] @ your backend side
|
|
// dataType: "html",
|
|
success: function(data1) {
|
|
window.location.replace("http://localhost:8080/penjualan/user/pesanan/");
|
|
console.log(data1);
|
|
}
|
|
|
|
});
|
|
}else{
|
|
toastr.options = {
|
|
"closeButton": true,
|
|
"debug": false,
|
|
"progressBar": true,
|
|
"positionClass": "toast-top-right",
|
|
"showDuration": "300",
|
|
"hideDuration": "1000",
|
|
"timeOut": "5000",
|
|
"extendedTimeOut": "1000",
|
|
"showEasing": "swing",
|
|
"hideEasing": "linear",
|
|
"showMethod": "fadeIn",
|
|
"hideMethod": "fadeOut"
|
|
};
|
|
|
|
|
|
toastr.error("Ekstensi Foto Harus .png atau .jpg");
|
|
document.getElementById('imagesource').focus() ;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script src="http://localhost:8080/penjualan/js/main.js"></script>
|
|
</body>
|
|
</html> |