Saturday, July 30, 2016

tutorial-upload-menyimpan-dan-menampilkan-gambar-dengan-php-dan-mysql

Studi Kasus : Membuat script untuk menguload image,menyimpan lokasi image ke database dan menampilkannya
Kebutuhan : Webserver Packages, already installed.
Ikuti langkah-langkah dibawah.
Step 1 : Persiapkan Database
  1. Buat database dengan nama db_tutorial
  2. Siapkan tabel dengan nama tb_image, dengan struktur tabel seperti gambar dibawah ini.
  3. Done with the database!
Step 2 : Persiapkan Folder Kerja
  1. Buat folder dengan nama helloMobile dalam document root anda
  2. Buat lagi folder dengan nama image didalam folder helloMobile yang telah anda buat sebelumnya. Folder image ini adalah folder yang akan digunakan untuk menyimpan gambar hasil upload.
  3. Simpan semua file dalam praktikum ini dalam folder helloMobile tersebut.
Step 3 : Membuat script koneksi ke DB
  1. Ketikkan script berikut,
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <?php
    $host = "localhost";
    $user = "root";
    $pass = "";
    $dbName = "db_tutorial";
    mysql_connect($host, $user, $pass);
    mysql_select_db($dbName)
    or die ("Connect Failed !! : ".mysql_error());
    ?>
  2. simpan dengan nama connect.php, dan simpan dalam folder helloMobile
Step 4 : Membuat form upload image
  1. Ketikkan script berikut,
    1
    2
    3
    4
    <form name="form" method="post" enctype="multipart/form-data" action="proses.php">
    Image : <input name="picture" type="file" />
    <input type="submit" name="upload" value="Upload" />
    </form>
  2. simpan dengan nama formupload.php, simpan dalam folder helloMobile
Step 5 : Membuat script pemrosesan dan menampilkan gambar hasil upload

  1. Ketikkan script berikut,
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    <?php
    include "connect.php";
    $fileName = $_FILES['picture']['name']; //get the file name
    $fileSize = $_FILES['picture']['size']; //get the size
    $fileError = $_FILES['picture']['error']; //get the error when upload
    if($fileSize > 0 || $fileError == 0){ //check if the file is corrupt or error
    $move = move_uploaded_file($_FILES['picture']['tmp_name'], 'E:/DocumentRootYuni/helloMobile/image/'.$fileName); //save image to the folder
    if($move){
    echo "<h3>Success! </h3>";
    $q = "INSERT into tb_image VALUES('','$fileName','image/$fileName')"; //insert image property to database
    $result = mysql_query($q);
    $q1 = "SELECT location from tb_image where filename = '$fileName' limit 1 "; //get the image that have been uploaded
    $result = mysql_query($q1);
    while ($data = mysql_fetch_array($result)) {
    $loc = $data['location']; ?>
    <br/>
    <h2> This is the Image : </h2>
    <img src="<?php echo $loc; ?>" /> <!-- show the image using img src -->
    <?php
    }
    } else{
    echo "<h3>Failed! </h3>";
    }
    } else {
    echo "Failed to Upload : ".$fileError;
    }
    ?>
  2. simpan dengan nama proses.php
  3. Untuk penjelasan script, dapat dilihat di komentar script :D
Step 6 : Testing Code
  1. Pergi ke http://localhost/helloMobile/formupload.php. Anda akan melihat form seperti dibawah,
  2. Pilih gambar yang ingin diupload dengan memilih tombol browse
  3. Pilih save. Maka gambar yang telah anda upload akan ditampilkan :D
Posted by at No comments:

Membuat Aplikasi web berbasis JSP Sederhana

Membuat Aplikasi web berbasis JSP Sederhana

8:33 PM  

Berikut dibawah ini adalah Salah satu Tugas Siswa didalam mengirimkan Tugas Membuat Form Biodata dan Laporan  menggunakan JSP dengan Variable Sementara dan perpaduan Tampilan menggunakan CSS agar Tampil lebih Indah.
1.  Output Program Penginputan Data














2. Output Program Laporan Data setelah "Proses"














 3. Coding Program :

<html>
 <head>
  <title>Input Biodata</title>
  <style type='text/css' >
 
  #button1 {
  padding-left:20px;
  text-align:left;
  }
  #button2 {
  padding-right:20px;
  text-align:right;
  }
 
  #kepala {
  font-family:algerian,snap itc;
  font-size:25px;
  height:50px;
  }
  #kaki {
  height:30px;
  }
  #tabel1 {
  background-color:dodgerblue;
  width:410;
  padding:10px;
  box-shadow:black 0px 0px 4px 1px;
  border-radius:20px 20px 20px 20px;
  }
  #tabel2 {
  background-color:dodgerblue;
  padding:10px;
  box-shadow:black 0px 0px 4px 1px;
  border-radius:20px 0px 20px 0px;
  }
  #tabel1_isi {
  background-color:black;
  color:white;
  width:400; height:200;
  padding:5px;
  }
  </style>
  <body bgcolor='cornflowerblue'>
   <br/>
    <form action='index.jsp' method='get'>
   <table id='tabel1' align='center' border='0' >
    <tr id='kepala'>
     <th colspan='2' id='kepala'>BIODATA SISWA</th>
    </tr>
    <tr>
     <td colspan='2'>
        <table align='center' id='tabel1_isi' border='0'>
            <tr>
            <td id='kolom1'>NIS :</td>
            <td><input type='text' name='nis' size='10' required></td>
            </tr>
            <tr>
            <td id='kolom1'>Nama :</td>
            <td><input type='text' name='nama' size='hobi0' required></td>
            </tr>
            <tr>
            <td id='kolom1'>Alamat :</td>
            <td><input type='text' name='alamat' size='hobi0' required></td>
            </tr>
            <tr>
            <td id='kolom1'>No. Telp :</td>
            <td><input type='text' name='no_telp' size='hobi0' required></td>
            </tr>
            <tr>
            <td id='kolom1'>Hobi :</td>
            <td><input type='text' name='hobi' size='hobi0' required></td>
            </tr>
        </table>
     </td>
    </tr>
    <tr id='kaki'>
     <td id='button1'>
     <input type='submit' value='proses'/>
     </td>
     <td id='buttonhobi'>
     <input type='reset' value='clear'/>
     </td>
    </tr>
    </div>
   </table>
  
   <br/>
  
   <table id='tabel2' align='center'>
    <%
    String nis = request.getParameter("nis");
    String nama = request.getParameter("nama");
    String alamat = request.getParameter("alamat");
    String no_telp = request.getParameter("no_telp");
    String hobi = request.getParameter("hobi");
    %>
    <tr bgcolor='black' style='color:white'>
     <th width='30'>No</th>
     <th width='50'>Nis</th>
     <th width='150'>Nama</th>
     <th width='200'>Alamat</th>
     <th width='120'>No. Telp</th>
     <th width='100'>Hobi</th>
    </tr>
    <tr>
     <td>1</td>
     <td><% out.println(nis); %></td>
     <td><% out.println(nama); %></td>
     <td><% out.println(alamat); %></td>
     <td><% out.println(no_telp); %></td>
     <td><% out.println(hobi); %></td>
    </form>
  </body>
</html>
Posted by at 1 comment:
Subscribe to: Posts (Atom)