Data Table Tugas Komputer
Contoh Penerapan Di Codeigniter
File Project kumlit
3.Tugas Semester
user and pas : admin
Datatable Responsive
<div class="table-responsive">
admin.php
<?php include('../templatesAdmin/headbar.php');?>
<?php include('../templatesAdmin/sidebar.php');?>
<style>
#dataTable_filter{
margin-left:70%;
}
.dataTables_length select{
width:100px;
}
#dataTable_paginate{
margin-left:70%;
}
</style>
<!--<h1 class="t text-center mt-3">Laporan Data Barang</h1>
<hr style="border:2px solid #eaeaea;width:30%;">
-->
<!--table-->
<div class="container mt-3">
<a href="http://localhost/tugas/index.php" target="_blank">
<div class="btn btn-primary mb-3 mt-1"><i class="fas fa-home"> Kembali Ke Website</i></div>
</a>
<div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">DATA BARANG</h6>
</div>
<div class="card-body" >
<div class="table-responsive">
<table class="table table-striped table-hover table-bordered" id="dataTable" width="100%" cellspacing="10" >
<thead>
<tr>
<th>NO</th>
<th>NAMA BARANG</th>
<th>HARGA</th>
<th>DISKON</th>
<th>STOK</th>
<th>BERAT</th>
<th>KONDISI</th>
<th width="200px" >TANGGAL / WAKTU</th>
<th>STATUS</th>
<th width="20px">EDIT</th>
<th width="20px">HAPUS</th>
</tr>
</thead>
<tfoot>
<tr>
<th >NO</th>
<th>NAMA BARANG</th>
<th>HARGA</th>
<th>DISKON</th>
<th>STOK</th>
<th>BERAT</th>
<th>KONDISI</th>
<th width="200px" >TANGGAL / WAKTU</th>
<th>STATUS</th>
<th width="20px">EDIT</th>
<th width="20px">HAPUS</th>
</tr>
</tfoot>
<tbody>
<?php
mysql_connect("localhost","root","");
mysql_select_db("db_komputer") or die(mysql_error());
$no = 0;
$ambil = mysql_query("select * from tb_produk");
while($data = mysql_fetch_array($ambil)){
$no++;
?>
<tr>
<td><?php echo $no;?></td>
<td><?php echo $data['nabar']?></td>
<td><?php echo number_format($data['harga'],0,',',',')?></td>
<td><?php echo $data['disc']?></td>
<td><?php echo $data['stok']?></td>
<td><?php echo $data['berat']?> gram</td>
<td><?php echo $data['kondisi']?> </td>
<td><?php echo $data['tgl_posting']?></td>
<td><div class="btn btn-success">Terjual</td>
<td width ="20px"><div class="btn btn-primary"><i class="fas fa-edit"></div></td>
<td width ="20px"><div class="btn btn-danger"><i class="fas fa-trash"></div></td>
</tr>
<?php }?>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!--/table-->
<?php include('../templatesAdmin/footer.php');?>
<?php include('../templatesAdmin/headbar.php');?>
<?php include('../templatesAdmin/sidebar.php');?>
<style>
#dataTable_filter{
margin-left:70%;
}
.dataTables_length select{
width:100px;
}
#dataTable_paginate{
margin-left:70%;
}
</style>
<!--<h1 class="t text-center mt-3">Laporan Data Barang</h1>
<hr style="border:2px solid #eaeaea;width:30%;">
-->
<!--table-->
<div class="container mt-3">
<a href="http://localhost/tugas/index.php" target="_blank">
<div class="btn btn-primary mb-3 mt-1"><i class="fas fa-home"> Kembali Ke Website</i></div>
</a>
<div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">DATA BARANG</h6>
</div>
<div class="card-body" >
<div class="table-responsive">
<table class="table table-striped table-hover table-bordered" id="dataTable" width="100%" cellspacing="10" >
<thead>
<tr>
<th>NO</th>
<th>NAMA BARANG</th>
<th>HARGA</th>
<th>DISKON</th>
<th>STOK</th>
<th>BERAT</th>
<th>KONDISI</th>
<th width="200px" >TANGGAL / WAKTU</th>
<th>STATUS</th>
<th width="20px">EDIT</th>
<th width="20px">HAPUS</th>
</tr>
</thead>
<tfoot>
<tr>
<th >NO</th>
<th>NAMA BARANG</th>
<th>HARGA</th>
<th>DISKON</th>
<th>STOK</th>
<th>BERAT</th>
<th>KONDISI</th>
<th width="200px" >TANGGAL / WAKTU</th>
<th>STATUS</th>
<th width="20px">EDIT</th>
<th width="20px">HAPUS</th>
</tr>
</tfoot>
<tbody>
<?php
mysql_connect("localhost","root","");
mysql_select_db("db_komputer") or die(mysql_error());
$no = 0;
$ambil = mysql_query("select * from tb_produk");
while($data = mysql_fetch_array($ambil)){
$no++;
?>
<tr>
<td><?php echo $no;?></td>
<td><?php echo $data['nabar']?></td>
<td><?php echo number_format($data['harga'],0,',',',')?></td>
<td><?php echo $data['disc']?></td>
<td><?php echo $data['stok']?></td>
<td><?php echo $data['berat']?> gram</td>
<td><?php echo $data['kondisi']?> </td>
<td><?php echo $data['tgl_posting']?></td>
<td><div class="btn btn-success">Terjual</td>
<td width ="20px"><div class="btn btn-primary"><i class="fas fa-edit"></div></td>
<td width ="20px"><div class="btn btn-danger"><i class="fas fa-trash"></div></td>
</tr>
<?php }?>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!--/table-->
<?php include('../templatesAdmin/footer.php');?>
header.php
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link href="../fontawesome/css/all.css" rel="stylesheet"> <!--load all styles -->
<title>Data Barang</title>
</head>
footer.php
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Login Admin</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label>Username</label>
<input type="text" class="form-control" placeholder="Masukan Username">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" placeholder="Masukan Password">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Batal</button>
<button type="button" class="btn btn-primary">Login</button>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<!--Data table-->
<!-- Bootstrap core JavaScript-->
<script src="../assets/vendor/jquery/jquery.min.js"></script>
<script src="../assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="../assets/vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for all pages-->
<script src="../assets/js/sb-admin-2.min.js"></script>
<!-- Page level plugins -->
<script src="../assets/vendor/chart.js/Chart.min.js"></script>
<!-- Page level custom scripts -->
<script src="../assets/js/demo/chart-area-demo.js"></script>
<script src="../assets/js/demo/chart-pie-demo.js"></script>
<!-- Page level plugins -->
<script src="../assets/vendor/datatables/jquery.dataTables.min.js"></script>
<script src="../assets/vendor/datatables/dataTables.bootstrap4.min.js"></script>
<!-- Page level custom scripts -->
<script src="../assets/js/demo/datatables-demo.js"></script>
</body>
</html>
sidebar.php
<body>
<center>
<div class="kotakJudul" style="width:600px;height:160px;margin-top:2%;text-align:center">
<div class="logo" style="width:30%;height:100%;;float:left;">
<img src="../img/kom3.png" style="width:100%;height:100%;">
</div>
<div class="UntukJudul" style="width:70%;height:100%;float:left;">
<h1>Penjualan Online</h1>
<h1>Rezeki Jaya Komputer</h1>
<h7>Jl. Putri Merak Jingga No.104, Kesawan, Kec. Medan Baru, Kota Medan, Sumatera Utara 20111<h7>
</div>
</div>
</center>
<!-- Navbar-->
<nav class="navbar navbar-expand-lg navbar-light bg-primary mt-2">
<a class="navbar-brand text-white" href="#"><strong>HALAMAN ADMIN</strong></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse ml-5" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link text-white mr-4" href="index.php">Input Data Barang</a>
</li>
<li class="nav-item">
<a class="nav-link text-white mr-4" href="diskon.php">Laporan Data Barang</a>
</li>
<li class="nav-item">
<a class="nav-link text-white mr-4" href="#">Barang Yang Dipesan</a>
</li>
<li class="nav-item">
<a class="nav-link text-white mr-4" href="http://localhost/tugas/Login">Barang Yang Terjual</a>
</li>
<li class="nav-item">
<a class="nav-link text-white mr-4" href="http://localhost/tugas/Login">Logout</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-light my-2 my-sm-0 text-white" type="submit">Search</button>
</form>
</div>
</nav>
<!-- /Navbar-->
Data Table Tugas Komputer
Reviewed by Leo
on
09:10
Rating:
Reviewed by Leo
on
09:10
Rating:
.png)
No comments