√ membuat website input dan output data sederhana

Konten [Tampil]

halo semua, kali ini saya akan berbagi mengenai hal yang menarik yaitu cara membuat website sederhana dengan html css javascript serta bantuan table. website sendiri adalah suatu informasi yang disediakan melalui internet sehingga banyak orang yang dapat menggunakan layanan informasi tersebut, website sering disebut dengan web atau www yaitu world wide web.

Kali ini saya akan membagikan cara agar kalian bisa membuat suatu aplikasi website yang dapat untuk menyimpan dan mengeluarkan data atau dikenal dengan istilah input dan output data. kali ini saya akan menggunakan layanan apache dan mysql. kedua layanan tersebut akan langsung ada ketika anda menginstall xampp. bagi anda yang belum memiliki aplikasinya anda dapat mendownloadnya disini yaa.

Setelah itu anda perlu yang namanya text editor, saya menyarankan agar anda memiliki notepad++, anda dapat mendownloadnya disini juga. kenapa saya sarankan aplikasi tersebut, karena aplikasi tersebut multi guna sekali, dapat digunakan untuk berbagai hal, seperti menulis biasa atau menulis code dengan banyak bahasa pemrograman.

langkah 1 siapkan database anda

langkah utama yang harus dilakukan dalam proses input output data adalah anda harus mempunyai media penyimpanan, anda dapat menggunakan mysql dalam melakukan penyimpanan tersebut. silahkan anda gunakan database saya agar mudah dalam membuat aplikasinya yaa.

-- phpMyAdmin SQL Dump
-- version 3.5.2.2
-- http://www.phpmyadmin.net
--
-- Host: 127.0.0.1
-- Generation Time: Dec 19, 2018 at 04:14 PM
-- Server version: 5.5.27
-- PHP Version: 5.4.7

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

--
-- Database: `db_aplikasi1b`
--

-- --------------------------------------------------------

--
-- Table structure for table `tb_barang`
--

CREATE TABLE IF NOT EXISTS `tb_barang` (
  `kode_barang` varchar(11) NOT NULL,
  `nama_barang` varchar(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `tb_barang`
--

INSERT INTO `tb_barang` (`kode_barang`, `nama_barang`) VALUES
('0', '0'),
('0', '0'),
('BL280', 'Batu'),
('BL009', 'Cincin');

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Langkah 2 anda perlu membuat file index.php

file index.php merupakan file master yang dapat anda gunakan sebagai template ketika anda membuat aplikasi, karena file ini yang akan pertama kali dipanggil ketika anda mengakses websitenya yaa. untuk kali ini anda gunakan notepad++ kemudian anda bernama file dibawah ini dengan nama index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Input Barang</title>
<link rel="stylesheet" href="asset/css/style.css" />
</head>
<?php include('connection/koneksi.php'); ?>
<body>
<form id="form1" name="form1" method="post" action="" enctype="multipart/form-data">
  <table width="500" border="0" cellspacing="2" cellpadding="2">
    <tr>
      <th colspan="3" align="center" class="header">Input Barang</th>
    </tr>
    <tr>
      <td width="28%" bgcolor="#0066CC"><span class="data">
        <label for="kodebarang">kode barang</label>
      </span></td>
      <td width="2%" bgcolor="#0066CC"><span class="data">:</span></td>
      <td width="70%" bgcolor="#0066CC"><span class="data">
        <input type="text" name="kodebarang" id="kodebarang" />
      </span></td>
    </tr>
    <tr>
      <td width="28%" bgcolor="#0066CC"><span class="data">
        <label for="namabarang">nama barang</label>
      </span></td>
      <td width="2%" bgcolor="#0066CC"><span class="data">:</span></td>
      <td width="70%" bgcolor="#0066CC"><span class="data">
        <input type="text" name="namabarang" id="namabarang" />
      </span></td>
    </tr>
    <tr>
      <td colspan="2" bgcolor="#0066CC">&nbsp;</td>
      <td width="70%" bgcolor="#0066CC"><span class="data">
        <input type="submit" name="btnsimpan" id="btnsimpan" value="Simpan" />
      <input type="reset" name="Batal" id="Batal" value="Batal" />
      </span></td>
    </tr>
  </table>
</form>
<?php
error_reporting(E_ALL ^ (E_NOTICE | E_WARNING));
if($_POST['btnsimpan'] == "Simpan")
 {
  $sql_insert ="INSERT INTO tb_barang (kode_barang,nama_barang) VALUES ('".$_POST['kodebarang']."','".$_POST['namabarang']."')";
  $query_insert = mysql_query($sql_insert) or die (mysql_error());
  if ($query_insert)
  {
   echo "<script>alert('Simpan Data Anda Berhasil !!! ')</script>";
   }
 }
 

?>
</body>
</html>

Langkah 3 membuat file laporan output

Langkah ini merupakan langkah penting karena data hasil pemprosesan file index diatas, anda dapat memberikan namanya laporan.php yaa, silahkan dicoba code dibawah ini.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Laporan Barang</title>
</head>

<body>
<?php include('file:///C|/xampp/htdocs/201612089/connection/koneksi.php'); ?>
<style type="text/css">
tr.header {font-weight:bold;text-align:center;}
caption {font-size:x-large;}
</style>

<div align="right"></div>

<table border="" cellspacing="1" cellpadding="1" width="50%">
<caption> Data Pemesanan <br /><br /><br /></caption>
<tr class="header">
<td>No</td>
<td>Kode Barang</td>
<td>Nama Barang</td>
</tr>
 <?php
 $hal="";
 $batas=10;
 if (empty($hal)){
  $posisi=0;
  $hal=1;
  }
 else 
  {
  $posisi=($hal-1)* $batas;
  }
{
$sql= mysql_query("select * from tb_barang LIMIT $posisi, $batas") or die(mysql_error());
;
 //$sql= mysqli_query($host, "select * from tbpemesanan LIMIT $posisi, $batas") or die (mysqli_error($host));
}

 $no=$posisi+1;
 
while ($data=mysql_fetch_array($sql)){
 //while ($data=mysqli_fetch_array($sql,MYSQLI_ASSOC)){
 ?>
    <tr>
    <td align="center"> <?php echo $no; ?></td>
    <td><?php echo $data['kode_barang']; ?></td>
    <td><?php echo $data['nama_barang']; ?></td>
    </tr>
<?php
$no++;
}
$sql2=mysql_query("select * from tb_barang") or die(mysql_error());
 //$sql2=mysqli_query($host,"select * from tbpemesanan") or die (mysqli_error($host));
$jumlahdata=mysql_num_rows($sql2);
 //$jumlahdata=mysqli_num_rows($sql2);
?>
</table>
<left> Jumlah data : <?php echo $jumlahdata ?></left>
<?php
$jmlhal= ceil($jumlahdata/$batas);
$url = "?page=seleksi_berita";
echo "<left>";
if ($hal>1){
 $previous=$hal-1;
 echo "<< <a href=$url&hal=1>First</a> | < <a href= $url&hal=$previous</a> |";
 }
else {
 echo "<< First | < Prev |";
 }
if ($hal<$jmlhal){
 $next=$hal+1;
 echo "| <a href=$url&hal=$next> Next</a> > | <a href =$url&hal=$jmlhal>Last</a> >>";
 }
else {
 echo "Next > | Last >>";
 }
echo "</left>";
?>
</body>
</html>

dan hasilnya jika anda benar memasukan codenya adalah seperti dibawah ini