Code Bareng

Latest Post

Showing posts with label CSS 3. Show all posts

Saturday, May 13, 2017

Halo Sahabat CODEBARENG disini saya akan share bagaimana Cara Membuat Layout dengan HTML dan CSS sederhana, membuat Layout atau susunan kerangka Website ini salah satu unsur pembuatan web yang harus di perhatikan loh. Terutama jika temen-temen ingin bekerja di bagian Web designer.

Sekarang kita belajar untuk bagaimana cara membuat layout sederhana khususnya untuk bagi teman-teman yang sedang belajar HTML dan CSS, dan tidak menggunakan framework Bootstrap.

Pada Tampilan Kali ini sederhana saja ya. Artikel ini bertujuan untuk teman-teman yang baru belajar. Jadi tidak terlalu banyak script yang kita gunakan, sebagai contoh kita membuat Layout Blog :

Contoh Tampilan Jadi :

Langkah 1 :
Buatlah sebuah folder dan file bernama index.html
berikut isian kodingannya.

<html>
 <head>
  <title>Belajar Membuat Layout dengan HTML dan CSS</title>
  <link rel="stylesheet" href="custom.css"/>
 </head>
 <body>
  <div class="header">
   <div class="jarak">
    <h2>Belajar Membuat Layout dengan HTML dan CSS</h2>
   </div>
  </div>
  <div class="menu">
   <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
   </ul>
  </div>
  <div class="content">
   <div class="jarak">
    <!-- kiri -->
    <div class="kiri">
     <!-- blog -->
     <div class="border">
      <div class="jarak">
       <h3>Lorem Ipsum</h3>
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, [...]</p>
       <button class="btn">Read More ..</button>
      </div>
     </div>
     <!-- end blog -->
     <!-- blog -->
     <div class="border">
      <div class="jarak">
       <h3>Lorem Ipsum</h3>
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, [...]</p>
       <button class="btn">Read More ..</button>
      </div>
     </div>
     <!-- end blog -->
    </div>
    <!-- kiri -->
    <!-- kanan -->
    <div class="kanan">
     <div class="jarak">
      <h3>CATEGORY</h3>
      <hr/>
      <p><a href="#" class="undecor">HTML</a></p>
      <p><a href="#" class="undecor">CSS</a></p>
      <p><a href="#" class="undecor">BOOTSTRAP</a></p>
      <p><a href="#" class="undecor">PHP</a></p>
      <p><a href="#" class="undecor">MYSQL</a></p>
      <p><a href="#" class="undecor">Jquery</a></p>
      <p><a href="#" class="undecor">Ajax</a></p>
     </div>
    </div>
    <!-- kanan -->
   </div>
  </div>
  <div class="footer">
   <div class="jarak">
    <p>copyright 2017 codebareng all reserved</p>
   </div>
  </div>
 </body>
</html>

Langkah 2 :
Buat file cssnya, dengan nama custom.css

body{
 background:#f3f3f3;
 color:#333;
 width:100%;
 font-family:sans-serif;
 margin:0 auto;
}

.header{
 width:90%;
 margin:auto;
 height:120px;
 line-height:120px;
 background:#41A85F;
 color:#fff;
}

.content{
 width:90%;
 margin:auto;
 height:420px;
 padding:0.1px;
 background:#fff;
 color:#333;
}

.kiri{
 width:70%;
 float:left;
 margin:auto;
 background:#fff;
 height:420px;
}

.kanan{
 width:30%;
 float:left;
 margin:auto;
 background:#fff;
 height:420px;
}

.border{
 border:2px solid #74C599;
 margin-top:1pc;
 padding-bottom:1pc;
 padding-left:2pc;
 padding-right:2pc;
}

.undecor{
 text-decoration:none;
}

.footer{
 width:90%;
 margin:auto;
 height:40px;
 line-height:40px;
 background:#41A85F;
 color:#fff;
}
.menu{
 background-color:#53bd84; 
 height:50px; 
 line-height:50px; 
 position:relative;
 width:90%;
 margin:0 auto;
 padding:0 auto;
}

.jarak{
 padding:0 2pc;
}

.menu ul {
 list-style:none;
}
 
.menu ul li a {
 float:left; 
 width:70px; 
 display:block; 
 text-align:center; 
 color:#FFF; 
 text-decoration:none; 
}
 
.menu ul li a:hover {
 background-color:#74C599; 
 display:block;
}

Langkah 3 :
Jalankan index.html pada layar browser mu ..

Demikian tutorial Kali ini Sekian dan Terima Kasih sudah berkunjung.

Happy Coding !

Thursday, May 11, 2017

Halaman Login terdapat pada Website Dinamis. Halaman ini adalah ‘pintu’ menuju halaman administrator, atau halaman user jika website-nya merupakan website yang mengharuskan penggunanya mempunyai akun.

Mengingat pentinya halaman ini, kita tidak bisa asal-asalan merancangnya. Desain halaman login yang bagus akan menghasilkan pengalaman pengguna yang baik.

Maka Dari itu saya disini akan share membuat template sederhana dengan menggunakan HTML dan Bootstrap. dengan model sederhana :D
oke langsung saja :

1. Download Bootstrap di Website Resmi nya ( cari di google )
2. setelah download selesai silahkan kamu buka XAMPP dan nyalakan Apache untuk web servernya, dan kemudian extract bootstrap kamu yg sudah di download tadi di folder project kamu, misalnya di C:\xampp\htdocs\login . maka nanti akan muncul 3 buah folder css, fonts dan js.
3.folder css berisi tentang file file style yang digunakan oleh bootstrap, file fonts berisi font yang dibutuhkan oleh css dan file js berisi file - file javascript.

setelah berhasil kamu extract di folder project kamu sekarang buatlah sebuah file dengan nama login.php

 
<!DOCTYPE HTML>
 <html>
  <head>
   <title>
    Login - CODEBARENG.NET
   </title>
   <link rel="stylesheet" href="assets/css/bootstrap.css">
   <link rel="stylesheet" href="assets/css/font-awesome.css">
  </head>
  <body style="background:#3598DC;">
   <div id="row" style="margin-top:9pc;">
    <div class="col-lg-3 col-lg-offset-4 centered">
     <div class="panel panel-default"  style="margin-left:3pc;">
      <div class="panel-heading">
       <h3>Input Data Login</h3>
      </div>
      <div class="panel-body">
       <form>
        <input type="text" class="form-control" placeholder="Username" name="user">
        <br>
        <input type="text" class="form-control" placeholder="Password" name="pass">
        <br>
        <button class="btn btn-primary btn-md"> SIGN IN</button>
        
        <span class="pull-right" style="padding-top:5px;">
         <a href="#">lost your password ?</a>
        </span>
       </form>
      </div>
     </div>
    </div>
   </div>
  </body>
 </html>

Oke Setelah itu Save dan Lihat Hasil nya
berikut hasilnya

Atau kamu bisa Download Disini :

Wednesday, May 10, 2017

Halo semua, kali ini saya akan berbagi Source Code Aplikasi Penjualan Barang (Kasir) dengan PHP MYSQL, tambah data, update / edit data, dan hapus data, pencarian data dengan menggunakan jquery data tables. Userinterface menggunakan Template Bootstrap

Fitur-fitur pada Aplikasi pada kali ini :

- Management Barang

- Penambahan dan manipulasi kategori dan barang

- Transaksi Penjualan

- Laporan Transaksi Penjualan

- Melihat stok barang dan restok barang

- Peringatan untuk barang habis

Username : Admin

Password : 123

untuk revisi bug aplikasi ada di blog saya yang satunya silahkan berkunjung ke : https://www.codekop.com/read/49/source-code-aplikasi-penjualan-barang-kasir-dengan-php-amp-mysql-gratis-/
terima kasih.

Screenshoot :

Untuk Menu dan fasilitas pada program download soucre ini dengan gratis dan silahkan jika mau di kembangkan. mohon maaf kalu masih dalam kekurangan. Terima kasih ..

Wednesday, February 8, 2017

1. Internal CSS

Internal CSS adalah istilah untuk kode CSS yang ditulis langsung dalam berkas HTML. Kode CSS ini dituliskan pada tag <style>. Tag ini bisa ditulis di dalam blok head atapun body, kedua-duanya sah. Nah, berikut ini contoh internal CSS.

<style>

.banner {width:600px; text-align:center; margin:0 auto; position: relative; -webkit-border-radius: 5px 0 5px 5px; -moz-border-radius: 5px 0 5px 5px; border-radius: 5px 0 5px 5px; padding:50px 20px;}

.banner:before {content: ""; position: absolute; top: 0; right: 0;border-width: 0 24px 24px 0; border-style: solid; border-color:#F0F0F0 #fff; -webkit-border-radius: 0px 0 0px 5px; -moz-border-radius: 0px 0 0px 5px; border-radius: 0px 0 0px 5px;}

#screen {width:100%;color: #555;"Century Gothic",CenturyGothic,AppleGothic,sans-serif;line-height:45px;}

.txt-title {font-size:2em;}

.txt-subtitle {font-size:1.2em;}

</style>

2. Eksternal CSS

Eksternal CSS adalah kode CSS yang ditulis terpisah dengan kode HTML. Eksternal CSS ditulis disebuah berkas khusus yang berekstensi .css. Sebagai contoh, saya akan membuat sebuah berkas bernama main.css. Berikut ini cuplikan isi berkas main.css

p{
      font-family: serif;
      line-height: 1.75em;
}

i { 
      font-family: sans;
      color: orange;
}

h2 { 
      font-family: sans;
      color: #333;
}

Untuk menggunakan CSS tersebut dalam HTML, kita perlu mengimpornya. Ada beberapa cara memasukkan kode CSS dari berkas eksternal:

<link rel="stylesheet" type="text/css" href="main.css">

Atau bisa juga seperti ini:

<style type="text/css">
@import "main.css";
</style>

Penulisan pada HTML versi lengkapnya seperti ini:

<!DOCTYPE html>
<html>
<head>
  <title>Contoh Eksternal CSS</title>
  <link rel="stylesheet" type="text/css" href="main.css">
</head>

<body>
  <h2>Ini judul artikel</h2>
  <p>internal css</p>
</body>
</html>

Hasilnya pun akan sama seperti contoh inline CSS, karena kode CSS-nya sama. Hanya saja berbeda tempat penulisannya.

3. Inline CSS

Inline CSS adalah kode CSS yang ditulis langsung pada atribut elemen HTML. Setiap elemen HTML memiliki atribut style, di sana lah inline CSS ditulis. Contohnya seperti ini:

<h2 style="color:red; font-family: sans;">Ini judul artikel</h2>

SOURCE : http://www.petanikode.com/2015/07/berbagai-cara-menulis-kode-css-dalam.html

Tuesday, February 7, 2017

halo kali ini saya share CARA CRUD XML dengan PHP, fitur tambah data, update/edit data, dan hapus data, pencarian data dengan menggunakan jquery data tables, lalu data di parsing ke xml , xml berfungsi database nya, lumayan untuk tugas XML bukan ? :D

okeee ini link downloadnya gann..
klik link : DOWNLOAD / DEMO
fitur:

HTML 5
CSS 3
BOOSTRAP 3
FONT AWESOME 4.6
JQUERY 3.1
JQUERY DATA TABLE
PHP
XML

oke itu saja selamat mencoba ...

NB : jika css nya berantakan, ganti link url di header.php seperti ini

<?php $url = 'http://localhost/namafolder'; ?>

Saturday, February 4, 2017

Tag pre adalah sebuah penanda yang hampir sama dengan blockquote. Tag pre sering digunakan dalam menyampaikan tutorial pemasangan Widget atau penerapan-penerapan yang berada pada HTML yang di mana di dalam isi tag pre ini berisi kode-kode seperti HTML, Javascript, CSS, JQuery, PHP, atau pun XML.

Cara Memasang Tag Pre dengan Tema Vanila di Blog

Nah sekarang saya akan membagikan tutorial cara pemasangan Tag pre dengan bertemakan Vanila. Ini cocok sekali bagi anda yang blognya Full Color.

Baiklah berikiut caranya.

1. Simpan kode CSS di bawah ini tepat sebelum kode ]]></b:skin>

pre {
background-color:white;
background-image:-webkit-linear-gradient(top, #f5f5f5 50%, white 50%);
background-image:-moz-linear-gradient(top, #f5f5f5 50%, white 50%);
background-image:-ms-linear-gradient(top, #f5f5f5 50%, white 50%);
background-image:-o-linear-gradient(top, #f5f5f5 50%, white 50%);
background-image:linear-gradient(top, #f5f5f5 50%, white 50%);
-webkit-background-size:30px 30px;
-moz-background-size:30px 30px;
-ms-background-size:30px 30px;
-o-background-size:30px 30px;
background-size:30px 30px;
background-repeat:repeat;
font:normal bold 12px/15px "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
color:#333;
border:2px solid #666;
position:relative;
padding:0 7px;
margin:10px 0;
overflow:auto;
word-wrap:normal;
white-space:pre;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.2);
-moz-box-shadow:0 1px 2px rgba(0,0,0,0.2);
box-shadow:0 1px 2px rgba(0,0,0,0.2);
position:relative;
}

pre[data-codetype] {
padding:29px 1em 7px 1em;
}

pre[data-codetype]:before {
content:attr(data-codetype);
display:block;
position:absolute;
top:0;
right:0;
left:0;
background-color:#666;
padding:0 7px;
font:bold 11px/20px Arial,Sans-Serif;
color:white;
}

pre[data-codetype="HTML"] {border-color:#0B7E88;color:#08464B;}
pre[data-codetype="CSS"] {border-color:#7B990C;color:#4B5D08;}
pre[data-codetype="JavaScript"] {border-color:#545448;color:#1F2E24;}
pre[data-codetype="JQuery"] {border-color:#395540;color:#2E2E27;}
pre[data-codetype="PHP"] {border-color:#FF9900;color:#865003;}
pre[data-codetype="XML"] {border-color:#FF0C39;color:#790015;}

pre[data-codetype="HTML"]:before {background-color:#0B7E88;}
pre[data-codetype="CSS"]:before {background-color:#7B990C;}
pre[data-codetype="JavaScript"]:before {background-color:#545448;}
pre[data-codetype="JQuery"]:before {background-color:#395540;}
pre[data-codetype="PHP"]:before {background-color:#FF9900;}
pre[data-codetype="XML"]:before {background-color:#FF0C39;}

2. Lalu Simpan template

Dan untuk penerapan pada postingan di blog Anda gunakan kode di bawah ini pada mode HTML

<pre data-codetype="HTML"> ... </pre>
<pre data-codetype="CSS"> ... </pre>
<pre data-codetype="JavaScript"> ... </pre>
<pre data-codetype="JQuery"> ... </pre>
<pre data-codetype="PHP"> ... </pre>
<pre data-codetype="XML"> ... </pre>

Demikian Tutorial ini terimakasih sudah berkunjung.

SUMBER : http://www.rumahmedia.id/2016/03/Cara-Memasang-Tag-Pre-dengan-Tema-Vanila-di-Blog.html

Thursday, February 2, 2017

Ok kali ini saya akan bahas cara CRUD di php

fitur-fitur contoh kali ini adalah :

1. Menggunakan bootstrap dan font-awesome sebagai desainnya
2. Dapat menginput data beserta gambar
3. Dapat mengedit data beserta gambar
4. Dapat menghapus data
5. Sudah menggunakan PDO ( php data object ) yang sudah familiar di pakai
6. search data menggunakan jquery data table

buat database db_crud

CREATE TABLE `anggota` (
`id_anggota` int(11) NOT NULL,
`nama` varchar(255) NOT NULL,
`alamat` text NOT NULL,
`telepon` varchar(255) NOT NULL,
`email` varchar(255) NOT NULL,
`jenkel` varchar(255) NOT NULL,
`gambar` varchar(255) NOT NULL,
`tgl_input` varchar(255) NOT NULL
) ;

lanjutt buat folder contoh crud lalu buat file:

config.php = untuk koneksi menghubungkan file ke database

index.php = buat menampilkan data

tambah.php = untuk tambah data

edit.php = untuk edit data

hapus.php = untuk hapus data

lalu buat folder assets untuk menyimpan
1. css
2. img
3. js

sesuai keperluan lalu download bootstrap, font awesome, jquery, dan datatables.js taruh di folder assets

oke kita koding mulai membuat koneksi dahulu :
config.php

<?php
 $user = 'root';
 $pass = ''; 
 
 $koneksi = new PDO('mysql:host=localhost;dbname=db_crud;', $user, $pass);

 
 if($koneksi){
  //echo 'koneksi berhasil';
 }else{
  echo 'gagal koneksi' .$e -> getMessage();
 }
?>

di atas di variabel $user, kita memakai username mysql default xampp dan $pass untuk password mysql di xampp di kosongkan saja, kita membuat $koneksi untuk memanggil dan konfigurasi database nya di situ ada if else, jika $koneksi bisa maka konfigurasi menyambungkan file php ke database berhasil, kalau tidak maka muncul error / gagalnya koneksi.

Jika koneksi berhasil maka comment saja seperti ini :

//echo 'koneksi berhasil';

setelah selesai masuk langkah ke 2 : index.php (untuk view data di database)

<!DOCTYPE HTML>

 <html>

  <head>

   <title>

    Contoh View

   </title>

   <link rel="stylesheet" href="assets/css/bootstrap.css">

   <link rel="stylesheet" href="assets/css/font-awesome.css">

   <link rel="stylesheet" href="assets/css/datatables.css">

   <script src="assets/js/jquery-3.1.1.min.js"></script>

   <style>

    body{width:95%;}

    .thead{

     background:#317CA3;

     color:#fff;

    }

   </style>

  </head>

  <body>

   <div class="row">

    <div class="container">

     <h1>Contoh Create Update Delete Search dan View Data</h1>

     

     <div style="padding-top:3pc;"></div>

     

     <div class="panel panel-primary">

      <div class="panel-heading">

       <h4><i class="fa fa-users"></i> Data

        <div class="pull-right">

         <a href="tambah.php"><button class="btn btn-primary"><i class="fa fa-user-plus"></i></button></a>

        </div>

       </h4>

      </div>

      <div class="panel-body">

       

       <table id="Mytable" class="table table-bordered" border="1">

        <thead>

         <tr class="thead">

          <td>No.</td>

          <td>Nama Anggota</td>

          <td>Alamat</td>

          <td>Telepon</td>

          <td>Email</td>

          <td>Jenis kelamin</td>

          <td>Gambar</td>

          <td>Tanggal Bergabung</td>

          <td style="width:80px;">Aksi</td>

         </tr>

        </thead>

        <tbody>

        <?php 

         require 'config.php'; // panggil koneksi yang sudah di buat

         $sql = 'select*from anggota order by id_anggota desc'; // query

         $row = $koneksi -> prepare($sql); // mempersiapkan untuk masuk ke eksekusi data

         $row -> execute();

         

         $hasil = $row -> fetchAll(); // tampilkan semua data di database

         $no =1; // membuat nomor

        ?>

        <?php foreach($hasil as $isi){ ?>

         <tr>

          <td><?php echo $no;?></td>

          <td><?php echo $isi['nama'];?></td>

          <td><?php echo $isi['alamat'];?></td>

          <td><?php echo $isi['telepon'];?></td>

          <td><?php echo $isi['email'];?></td>

          <td><?php echo $isi['jenkel'];?></td>

          <td>

           <a href="assets/img/<?php echo $isi['gambar'];?>">

            <img src="assets/img/<?php echo $isi['gambar'];?>" style="width100px;height:100px;" class="img-responsive">

           </a> 

          </td>

          <td><?php echo $isi['tgl_input'];?></td>

          <td>

           <a href="edit.php?anggota=<?php echo $isi['id_anggota'];?>"><button class="btn btn-primary"><i class="fa fa-edit"></i></button></a>

           <a href="hapus.php?anggota=<?php echo $isi['id_anggota'];?>"><button class="btn btn-danger" value="Deleteimage"><i class="fa fa-trash"></i></button></a>

          </td>

         </tr>

        <?php $no++; }?>

        </tbody>

       </table>

      </div>

     </div>

    </div>

   </div>

  </body>

  <script src="assets/js/datatables.js"></script>

  <script>

   $(document).ready(function(){

    $('#Mytable').DataTable();

   });

  </script>

 </html>

lalu buat file tambah.php untuk create data :

<?php date_default_timezone_set("Asia/Jakarta");?>
<!DOCTYPE HTML>
 <html>
  <head>
   <title>
    Contoh Create Data
   </title>
   <link rel="stylesheet" href="assets/css/bootstrap.css">
   <link rel="stylesheet" href="assets/css/font-awesome.css">
   <style>
    body{width:95%;}
    td{ padding-top:0.5pc;}
    .form-control{border-radius:0px;}
   </style>
  </head>
  <body>
   <div class="row">
    <div class="container">
     <h1>Contoh Create Update Delete Search dan View Data</h1>
     
     <div style="padding-top:3pc;"></div>
     
     <div class="panel panel-primary">
      <div class="panel-heading">
       <h4><i class="fa fa-user-plus"></i> Data
       <div class="pull-right">
         <a href="index.php"><button class="btn btn-primary"><i class="fa fa-home"></i></button></a>
        </div>
       </h4>
      </div>
      <div class="panel-body">
       <form method="post"  enctype="multipart/form-data">
        <table>
         <table width="55%;">
          <tr>
           <td class="pad">Nama</td>
           <td><input type="text" class="form-control" name="nama"></td>
          </tr>
          <tr>
           <td class="pad">Alamat</td>
           <td><input type="text" class="form-control" name="alamat"></td>
          </tr>
          <tr>
           <td class="pad">Telepon</td>
           <td><input type="text" class="form-control" name="telepon"></td>
          </tr>
          <tr>
           <td class="pad">Email</td>
           <td><input type="text" class="form-control" name="email"></td>
          </tr>
          <tr>
           <td class="pad">Jenis Kelamin</td>
           <td>
            <select name="jenkel" class="form-control">
             <option value="">Pilih Salah Satu</option>
             <option value="Laki-laki">Laki-laki</option>
             <option value="Perempuan">Perempuan</option>
            </select>
           </td>
          </tr>
          <tr>
           <td class="pad">Taruh Gambar</td>
           <td><input type="file" name="gambar"></td>
          </tr>
          <tr>
           <td class="pad">Tgl Input</td>
           <td><input type="text" class="form-control" value="<?php echo date('d M Y, H:i:s');?>" name="tgl_input"></td>
          </tr>
          <tr>
           <td></td>
           <td style="float:right;"><button name="proses" value="Tambah" class="btn btn-primary"> Tambah Anggota</button></td>
          </tr>
         </table>
        </table>
       </form>
      </div>
     </div>
    </div>
   </div>
  </body>
 </html>

<?php
require 'config.php';
 if(!empty($_POST['proses'])){
 $nama = $_POST['nama'];
 $alamat = $_POST['alamat'];
 $telepon = $_POST['telepon'];
 $email = $_POST['email'];
 $jenkel = $_POST['jenkel'];
 $tgl_input = $_POST['tgl_input'];
 
 $target = 'assets/img/';
 $target = $target. basename ($_FILES['gambar']['name']);
 
 if(move_uploaded_file($_FILES['gambar']['tmp_name'], $target)){
  $data[] = $nama; //1
  $data[] = $alamat;  //2
  $data[] = $telepon; //3
  $data[] = $email;   //4
  $data[] = $jenkel;  //5
  $data[] = $_FILES['gambar']['name'];  //6 
  $data[] = $tgl_input; //7
  $sql ='insert into anggota (nama, alamat, telepon, email,jenkel,gambar,tgl_input)values(?,?,?,?,?,?,?)';
  $row = $koneksi -> prepare($sql);
  $row -> execute($data);
  echo '<script>alert("Tambah Anggota Sukses");window.location="index.php"</script>';
 }else{
  echo '<script>alert("Gagal tambah Anggota")window.location="tambah.php";</script>';
 }
}
?>

setelah itu test create data nya jika berhasil lalu masuk ke proses edit.php

<?php date_default_timezone_set("Asia/Jakarta");?>
<?php require'config.php';?>
<?php $id = $_GET['anggota'];?>
<?php 
 $sql ='select * from anggota where id_anggota=?';
 $row = $koneksi -> prepare($sql);
 $row -> execute(array($id));
 $hasil = $row -> fetch();

?>
<!DOCTYPE HTML>
 <html>
  <head>
   <title>
    Contoh Edit Data
   </title>
   <link rel="stylesheet" href="assets/css/bootstrap.css">
   <link rel="stylesheet" href="assets/css/font-awesome.css">
   <style>
    body{width:95%;}
    td{ padding-top:0.5pc;}
    .form-control{border-radius:0px;}
   </style>
  </head>
  <body>
   <div class="row">
    <div class="container">
     <h1>Contoh Create Update Delete Search dan View Data</h1>
     
     <div style="padding-top:3pc;"></div>
     
     <div class="panel panel-primary">
      <div class="panel-heading">
       <h4><i class="fa fa-edit"></i> Data
       <div class="pull-right">
         <a href="index.php"><button class="btn btn-primary"><i class="fa fa-home"></i></button></a>
        </div>
       </h4>
      </div>
      <div class="panel-body">
       <form method="post"  enctype="multipart/form-data">
        <table>
         <table width="55%;">
          <tr>
           <td class="pad">Nama</td>
           <td><input type="text" class="form-control" value="<?php echo $hasil['nama'];?>" name="nama"></td>
          </tr>
          <tr>
           <td class="pad">Alamat</td>
           <td><input type="text" class="form-control" value="<?php echo $hasil['alamat'];?>" name="alamat"></td>
          </tr>
          <tr>
           <td class="pad">Telepon</td>
           <td><input type="text" class="form-control" value="<?php echo $hasil['telepon'];?>" name="telepon"></td>
          </tr>
          <tr>
           <td class="pad">Email</td>
           <td><input type="text" class="form-control" value="<?php echo $hasil['email'];?>" name="email"></td>
          </tr>
          <tr>
           <td class="pad">Jenis Kelamin</td>
           <td>
            <select name="jenkel" class="form-control">
             <option value="<?php echo $hasil['jenkel'];?>"><?php echo $hasil['jenkel'];?></option>
             <option value="">Pilih Salah Satu</option>
             <option value="Laki-laki">Laki-laki</option>
             <option value="Perempuan">Perempuan</option>
            </select>
           </td>
          </tr>
          <tr>
           <td class="pad">Taruh Gambar</td>
           <td><input type="file" name="gambar"></td>
          </tr>
          <tr>
           <td><input type="hidden" class="form-control" value="<?php echo $hasil['id_anggota'];?>" name="id"></td>
           <td>
            <a href="assets/img/<?php echo $hasil['gambar'];?>">
             <img src="assets/img/<?php echo $hasil['gambar'];?>" style="width100px;height:100px;" class="img-responsive">
            </a> 
           </td>
          </tr>
          <tr>
           <td></td>
           <td style="float:right;"><button name="proses" value="Tambah" class="btn btn-primary"> Tambah Anggota</button></td>
          </tr>
         </table>
        </table>
       </form>
      </div>
     </div>
    </div>
   </div>
  </body>
 </html>

<?php
 if(!empty($_POST['proses'])){
 $nama = $_POST['nama'];
 $alamat = $_POST['alamat'];
 $telepon = $_POST['telepon'];
 $email = $_POST['email'];
 $jenkel = $_POST['jenkel'];
 $id = $_POST['id'];
 $target = 'assets/img/';
 $target = $target. basename ($_FILES['gambar']['name']);
 
 if(move_uploaded_file($_FILES['gambar']['tmp_name'], $target)){
  $data[] = $nama; //1
  $data[] = $alamat;  //2
  $data[] = $telepon; //3
  $data[] = $email;   //4
  $data[] = $jenkel;  //5
  $data[] = $_FILES['gambar']['name'];  //6 
  $data[] = $id; //7
  $sql ='update anggota set nama=?, alamat=?, telepon=?, email=?,jenkel=?,gambar=? where id_anggota=?';
  $row = $koneksi -> prepare($sql);
  $row -> execute($data);
  echo '<script>alert("Edit Anggota Sukses");window.location="index.php"</script>';
 }elseif($_POST['proses'] == 'Tambah'){
  $data[] = $nama; //1
  $data[] = $alamat;  //2
  $data[] = $telepon; //3
  $data[] = $email;   //4
  $data[] = $jenkel;  //5
  $data[] = $id; //6
  $sql ='update anggota set nama=?, alamat=?, telepon=?, email=?,jenkel=? where id_anggota=?';
  $row = $koneksi -> prepare($sql);
  $row -> execute($data);
  echo '<script>alert("Edit Anggota Sukses");window.location="index.php"</script>';
 }else{
  echo '<script>alert("Gagal Edit Anggota")window.location="tambah.php";</script>';
 }
}
?>

lalu setelah edit data bisa membuat hapus.php untuk hapus data :

<?php
 require 'config.php';
 $id = $_GET['anggota'];
 $sql = 'select *from anggota where id_anggota=?';
 $row = $koneksi -> prepare($sql);
 $row -> execute(array($id));
 $hasil = $row -> fetch();

 
 unlink('assets/img/'.$hasil['gambar'].''); //hapus img di folder
 
 $sql_delete = 'delete from anggota where id_anggota=?';
 $row_delete = $koneksi -> prepare($sql_delete);
 $row_delete -> execute(array($id));
 
 echo '<script>alert("Hapus Berhasil");window.location="index.php";</script>';
?>

setelah itu coba dan jalankan jika anda error silahkan di download sekian semoga berhasil

Saturday, January 28, 2017

Script Login dan pendaftaran dengan html5 / css3 dan jquery
yah kali ini saya hanya ngasih script aja dulu ya buat login / sign up pakai jquery.. kalau kamu belum tau apa itu jquery ini saya jelaskan dulu..

JQUERY :

sebuah library JavaScript. Dalam dunia pemrograman, library adalah kumpulan dari berbagai fungsi 'siap pakai' untuk memudahkan pembuatan sebuah aplikasi. Dengan demikian, jQuery adalah kumpulan fungsi-fungsi JavaScript yang memudahkan penulisan kode JavaScript.

SOURCE : www.duniailkom.com/tutorial-belajar-jquery-pengertian-jquery/

oke itu saja langsung koding dulu.. simpan di login.php di halaman htdocs/folderbaru/ atau sesuai selera

<!DOCTYPE HTML>
<html>
    <head>
        <title>Latihan jquery </title>
        <script type="text/javascript" src="jquery-3.1.1.js"></script>
        <!--  Created by : fauzan1892  -->
        <style>
             body{ background:#ddd; color:#fff; width:99%; font-family:sans serif;}
            .row{ background:#24303C; margin:0 545px; margin-top:5pc; }
            .sub-menu{ text-align:center; padding-top:1pc; padding-bottom:1pc;}
            .btn-1{width:10pc; height:2.5pc; border:0px; font-size:16px; background:#1AB188;color:#fff;}
            .btn-2{width:10pc; height:2.5pc; border:0px; font-size:16px; background:#FE5E54;color:#fff;}
            .body{ text-align:center; }
             center{font-size:20px;}
            .form{border:1px solid #fff; height:2.5pc; font-size:16px; padding-left:5px; background:#24303C; color:#fff;width:84%;}
            .pull-left{float:left; width:45%; padding-left:18.5px;}
            .pull-right{float:right;width:45%;  padding-right:18.5px;}
        </style>
    </head>
    <body>
        <div class="row">
            <div class="sub-menu">
                <a href="#" id="formlogin"><button class="btn-1">Sign In</button></a>
                <a href="#" id="formdaftar"><button class="btn-2">Sign Up</button></a>
            </div>
            <div id="login">
                <div class="container">
                    <div class="body">
                        <br>
                            <center>Sign In For Admin</center>
                        <br>
                        <form method="POST" action="">
                            <input type="text" class="form" placeholder="Username *" name="username" required="required">
                            <br><br>
                            <input type="password" class="form" placeholder="Password *" name="password" required="required">
                            <br><br>
                            <p><button class="btn-1" name="proses">LOG IN</button></p>
                            <br>
                        </form>
                    </div>
                </div>
            </div>
            <div id="daftar">
                <div class="container">
                    <div class="body">
                        <br>
                            <center>Sign Up For New Member</center>
                        <br><br>
                        <form method="POST" action="">
                            <div class="pull-left">
                                <input type="text" class="form" placeholder="First Name *" name="email" required="required">
                            </div>
                            <div class="pull-right">
                                <input type="text" class="form" placeholder="Last Name *" name="email" required="required">
                            </div>
                            <br><br><br>
                            <input type="text" class="form" placeholder="Email Address *" name="email" required="required">
                            <br><br>
                            <input type="text" class="form" placeholder="Username *" name="username" required="required">
                            <br><br>
                            <input type="password" class="form" placeholder="Set A Password *" name="password" required="required">
                            <br><br>
                            <input type="password" class="form" placeholder="Retype Password *" name="retype" required="required">
                            <br><br>
                            <p><button class="btn-2" name="proses">GET STARTED</button></p>
                            <br>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <script>
            $('#daftar').hide();
            $('#formdaftar').click(
                function(){
                    $('#daftar').show();
                    $('#login').hide();
                }
            );
        </script>
        <script>
            $('#login').hide();
            $('#formlogin').click(
                function(){
                    $('#login').show();
                    $('#daftar').hide();
                }
            );
        </script>
    </body>
</html>

hasil :

oke itu dulu sekian terima kasih

Kali ini saya akan mengshare cari membuat template sederhana dengan HTML 5 dan CSS 3 ..

oke Langsung saja :
1. buat direktori lat1 di htdocs anda dan buat file index.php
2. buat styleku.css sebagai css externalnya
3. mulai koding :

4. Lalu buka browser anda dan jalankan web nya
OKE ITU SAJA TERIMA KASIH

Code Bareng - Kumpulan Web Tutorial

Translate

Labels

Latest Post

Saturday, May 13, 2017

Tutorial Belajar Cara Membuat Layout dengan HTML dan CSS

Thursday, May 11, 2017

Template Login Sederhana Dengan Bootstrap

Wednesday, May 10, 2017

Source Code Aplikasi Penjualan Barang (Kasir) dengan PHP MYSQL

Wednesday, February 8, 2017

Tiga Cara Penulisan Kode CSS

1. Internal CSS

2. Eksternal CSS

3. Inline CSS

Tuesday, February 7, 2017

Contoh Create Update Delete dengan PHP / XML

Saturday, February 4, 2017

Cara Memasang Tag Pre dengan Tema Vanila di Blog

Thursday, February 2, 2017

Contoh Create Update Delete Search dan View Data

Saturday, January 28, 2017

Form Login dan Pendaftaran Dengan HTML 5 CSS3 dan JQUERY

Cara Membuat Template Sederhana Dengan HTML 5 dan CSS 3

Popular Posts

Labels

Total Pageviews

Labels

share kode program, tutorial php bahasa indonesia, Berisi Aplikasi yang di bagikan untuk para pembaca guna untuk dipelajari bersama