Belajar Ngoding: Sistem Informasi Rawat Jalan Rumah Sakit Dengan PHP,Javascript,Bootstrap - Part 4 (Pembuatan Page Tampil Data Master dan Entry Data Master menggunakan MODAL Bootsrap)

Masih dalam pembahasan Entry Data Master, namun dengan cara yang berbeda namun sedikit lebih keren karna menggunakan fungsi modal yang ada pada bootsrap. Di tahap ini saya akan membuat page Entry Data Labor Dan Radiologi menggunakan Modal tersebut.

Berikut Tampilan yang akan kita buat Untuk Data Laboratorium:

Berikut Tampilan yang akan kita buat Untuk Data Radiologi:

Proses data labor dan radiologi sama, maka saya hanya akan menampilkan syntax yang labor saja, untu radiologi tinggal menyesuaikan data sesuai kebutuhan saja.

berikut langkah 2 yang akan kita lakukan:
1. buat table di dalam databse "sirs" dengan nama table : labor
CREATE TABLE `labor` (
`idlab` char(11) NOT NULL DEFAULT '',
`namapemeriksaanlab` varchar(80) DEFAULT NULL,
`tariflab` int(11) DEFAULT NULL,
PRIMARY KEY (`idlab`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
2. buatlah sebuah file dengan nama "list_data_labor.php", dan simpan di dalam folder SIRS kembali
sytax dari file teresebut seperti di bawah ini

Deskripsi Syntax :

baris ke 5 : memanggil file konek.php yang berfungsi untuk membuat koneksi ke database
baris ke 7 s/d 16 merupakan syntax untuk pembuatan id lab secara otomatis,
baris 18 s/d 25 : proses simpan data jika tombol Simpan di klik/ di proses
baris 26 s/d 34 : proses update data jika tombol btnupdatelab di klik/ di proses
baris 35 s/d 40 : proses hapus data jika tombol btnhapuslab di klik/ di proses

Deskripsi Syntax:

syntax diatas berfungsi fungsi untuk memanggil script bootstrap, dan jquery

Deskripsi Syntax :

baris 62 s/d 63 : membuat tombol Tambah data Lab yang apabila di klik nanti akan memanggil modal Tambah Data, untuk itu nama "data-target" pada tombol tambah data lab nantinya juga harus sama dengan id modal yang akan di munculkan nantinya.
baris 66 s/d 71 : membuat textbox dan tombol untuk pencarian data
baris 107 s/d 134 : perintah untuk menampilkan data labor yang ada di databse ke dalam halaman / page
baris 77 s/d 104 : syntax untuk membuat modal tambah data,
baris 135 s/d 168 : syntax untuk membuat modal update data,
baris 171 s/d 194 : syntax untuk membuat modal hapus data

Syntax secara lengkap sebb:
-

<!DOCTYPE html>
<html>

<?php
 include 'koneksi.php';

   $carikode = mysqli_query($conn ,"select max(idlab) from labor") or die (mysql_error());
   $datakode = mysqli_fetch_array($carikode);
   if ($datakode) {
    $nilaikode = substr($datakode[0], 3);
    $kode = (int) $nilaikode;
    $kode = $kode + 1;
    $hasilkode = "LAB".str_pad($kode, 8, "0", STR_PAD_LEFT);
   } else {
    $hasilkode = "LAB00000001";
   }

 if (isset($_POST['simpanlab'])) {
  $namapemeriksaanlab= $_POST['txtnamapemeriksaanlab'];
  $tarif= $_POST['txttarif'];

  $sql = mysqli_query($conn, "INSERT INTO labor values ('$hasilkode','$namapemeriksaanlab','$tarif')") or die(mysqli_error());
   echo "<script> alert ('Data Behasil di Tambahkan');
     document.location='halamanutama.php?page=master&action=listdatalabor';
     </script>";
 }elseif (isset($_POST['btnupdatelab'])) {
  $idlab= $_POST['idlab'];
  $namapemeriksaanlab= $_POST['txtnamapemeriksaanlab'];
  $tariflab= $_POST['txttariflab'];

  $updatelab= mysqli_query($conn, "UPDATE labor SET namapemeriksaanlab='$namapemeriksaanlab',tariflab='$tariflab' where idlab='$idlab' ") or die(mysql_error());
   echo "<script> alert ('Data Behasil di Update');
     document.location='halamanutama.php?page=master&action=listdatalabor';
     </script>";
 }elseif (isset($_POST['btnhapuslab'])) {
  $idlab= $_POST['btnhapuslab'];
  $hapuslab= mysqli_query($conn, "DELETE FROM labor where idlab='$idlab' ") or die(mysql_error());
   echo "<script> alert ('Data Behasil di Hapus');
     document.location='halamanutama.php?page=master&action=listdatalabor';
     </script>";
 }
?>

<head>
 <link rel="stylesheet" href="jquery-ui-1.12.1//jquery-ui.css">
 <script type="text/javascript" src="jquery-1.12.4.min.js"></script>
 <script type="text/javascript" src="jquery-ui-1.12.1/jquery-ui.min.js"></script> 

 <link rel="stylesheet" href="bootstrap-3.3.6/dist/css/bootstrap.min.css"/>
 <script src="bootstrap-3.3.6/dist/js/bootstrap.min.js"></script>
</head>

<body>
<div class="container">
<fieldset>
<div class="panel panel-info">
 <div class="panel-heading">
 <legend>Data Laboratorium</legend></div>
<table>
<tr>
<td> 
 <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#TambahDataLab"> 
 <span class="glyphicon glyphicon-plus" aria-hidden="true"> Tambah Data </span></button>
</td>
<td width="910px">
 <form action="" method="POST" class="navbar-form navbar-right">
 <div class="form-group">
  <input type="text" name="txtcari" placeholder='Cari Id/Nama Pem.Lab' class='form-control input-sm'></input>
  <button type="submit" name="btncari" class='btn btn-sm btn-primary'><span class="glyphicon glyphicon-search"> Cari Data</span></button>
 </div>
</form>
</td>
</tr>
</table>
<!-- Modal Tambah Data -->
<div class="modal fade" id="TambahDataLab" tabindex="-1" role="dialog" aria-labelledby="TambahDataLabLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="TambahDataLabLabel">
Form Tambah Data Pemeriksaan Laboratorium</h4>
</div>
<div class="modal-body">
        <form action="" method="POST" role="form">
         
         <div class="form-group">
          <label for="">Id Lab</label>
          <input type="text" name="txtidlab" class="form-control" id="" placeholder="AUTOMATIC" readonly>
          <label for="">Nama Pemeriksaan Lab</label>
          <input type="text" name="txtnamapemeriksaanlab" class="form-control" id="">
          <label for="">Tarif </label>
          <input type="text" name="txttarif" class="form-control" id="">
         </div>
</div>
<div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="submit" name="simpanlab" class="btn btn-primary">Save</button>
       </form>
</div>
</div>
</div>
</div>
<!-- Menampilkan data Labor yang ada di database -->
 <table class="table table-striped table-bordered small">
<tr>
 <th bgcolor="#4bf9f3">ID LAb</th>
 <th bgcolor="#4bf9f3">Nama Pemeriksaan</th>
 <th bgcolor="#4bf9f3">Tarif</th>
 <th bgcolor="#4bf9f3">Action</th>
 </tr>
<?php
 include 'koneksi.php';
 $txtcari = @$_POST['txtcari'];
 $btncari = @$_POST['btncari'];
 $sql = mysqli_query($conn, "select * from labor") or die (mysqli_error());
    
 if(isset($_POST['btncari'])){
 $sql = mysqli_query($conn, "select * from labor where namapemeriksaanlab like '%$txtcari%' or idlab like '%$txtcari%'") or die (mysqli_error()); 
 }
 while ($datalab = mysqli_fetch_array($sql)) {
 ?>
<tr>
 <td><?php echo $datalab['idlab']; ?></td>
 <td><?php echo $datalab['namapemeriksaanlab']; ?></td>
 <td><?php echo $datalab['tariflab']; ?></td>     
 <td>
     <button name="btnupdate" type="buton" class="btn btn-info" data-toggle="modal" data-target="#my<?php echo $datalab['idlab']; ?>">
     <span class="glyphicon glyphicon-edit" aria-hidden="true"> edit </span>
     </button>

 <!-- Modal Edit Data-->
 <div class="modal fade" id="my<?php echo $datalab['idlab']; ?>
" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
 <h4 class="modal-title" id="myModalLabel">
Form Update Data Pemeriksaan Labor</h4>
</div>
<div class="modal-body">
 <form action="" method="POST" role="form">
              
 <div class="form-group">
 <input type="text" name="idlab" class="form-control" value="<?php echo $datalab['idlab']; ?>" id="" readonly>
 </div>
<div class="form-group">
 <label for="">Nama Pemeriksaan Lab</label>
 <input type="text" name="txtnamapemeriksaanlab" class="form-control" value="<?php echo $datalab['namapemeriksaanlab']; ?>" id="">
 </div>
<div class="form-group">
        <label for="">Tarif</label>
        <input type="text" name="txttariflab" class="form-control" value="<?php echo $datalab['tariflab']; ?>" id="">
        </div>
</div>
<div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      <button type="submit" name="btnupdatelab" class="btn btn-primary">Save changes</button>
      </form>
</div>
</div>
</div>
</div>
<button class="btn btn-danger" data-toggle="modal" data-target="#hapus<?php echo $datalab['idlab']; ?>"><span class="glyphicon glyphicon-trash" aria-hidden="true"> Hapus </span> </button>
     <!-- Modal Hapus Data -->
     <div class="modal fade" id="hapus<?php echo $datalab['idlab']; ?>
" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
       <div class="modal-dialog" role="document">
         <div class="modal-content">
           <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
             <h4 class="modal-title" id="myModalLabel">
Form Hapus Data Pemeriksaan Labor</h4>
</div>
<div class="modal-body">
             <form action="" method="POST" role="form">
              
              Apakah Anda Ingin Menghapus Data ini : <br />
               ID Pemeriksaan Labor    : <?php echo $datalab['idlab']; ?><br />
               Nama Pemeriksaan Labor  : <?php echo $datalab['namapemeriksaanlab']; ?><br />
               Tarif Pemeriksaan Labor : <?php echo $datalab['tariflab']; ?><br />             
           </div>
<div class="modal-footer">
             <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
             <button type="submit" name="btnhapuslab" value="<?php echo $datalab['idlab']; ?>" class="btn btn-primary">Hapus</button>
            </form>
</div>
</div>
</div>
</div>
</td>
    </tr>
<?php
   }
  ?>
  </table>
</fieldset>
</div>
</body>
</html>

Thursday, 1 March 2018

Sistem Informasi Rawat Jalan Rumah Sakit Dengan PHP,Javascript,Bootstrap - Part 4 (Pembuatan Page Tampil Data Master dan Entry Data Master menggunakan MODAL Bootsrap)

No comments:

Post a Comment