Kategori
PHP

Delete Multiple Data dengan PHP

Studi Kasus : Membuat Fungsi untuk menghapus multiple data dalam database (mysql) dengan checkbox
Kebutuhan : Webserver Packages, already installed.

Checkbox multi delete seperti di Gmail, kita bisa memilih untukmenghapus message dalam inbox kita dengan mengklik tanda checkbox pada data – data yang ingin kita hapus. Tutorial kali ini akan membuat contoh aplikasi untuk menghapus data – data tertentu yang ditandai dengan checkbox (seperti di Gmail).

Ok, langsung praktik saja.

Step 1 : Persiapkan Database

  1. Buat database dengan nama db_tutorial
  2. Siapkan tabel dengan nama tb_book, dengan struktur tabel seperti gambar dibawah ini.
  3. Insert kan beberapa sample data, seperti gambar dibawah
  4. Done!

Step 2 : Persiapkan Folder Kerja

  1. Buat folder dengan nama tutorphp dalam document root anda
  2. Simpan semua file dalam tutorial ini dalam folder tersebut.

Step 3 : Membuat script koneksi ke Database

  1. Ketikkan script berikut,
    [sourcecode language=”php”]
    <?php
    $host = "localhost";
    $user = "root";//adjust according to your mysql setting
    $pass = ""; //adjust according to your mysql setting, i use no password here
    $dbName = "db_tutorial";
    mysql_connect($host, $user, $pass);
    mysql_select_db($dbName)
    or die ("Connect Failed !! : ".mysql_error());
    ?>
    [/sourcecode]
  2. simpan dengan nama connect.php

Step 4 : Membuat Script untuk menampilkan data

  1. Ketikkan script berikut,
    [sourcecode language=”php”]
    <html><head>
    <title>Itx.Web.Id</title>
    <script type="text/javascript" src="pilihan.js"></script>
    <script type="text/javascript" src="warning.js"></script>
    </head>
    <body>
    <h2> The Data <h2>
    <?php
    include ‘connect.php’;
    $query = "SELECT * FROM tb_book"; //the query for get all data in tb_student
    $result = mysql_query($query);
    ?>

    <form name="myform" method="post" action="prosesdeletemulti.php">

    <?php
    echo "<table border=’0′ cellpadding=’2′ cellspacing=’2′>";
    echo "<tr bgcolor=’orange’>
    <td> <b> Title </b> </td>
    <td> <b> Author </b> </td>

    </tr>";

    $i = 0;
    while ($data = mysql_fetch_array($result)) { //mysql_fetch_array = get the query data into array
    echo "<tr>
    <td>".$data[‘title’]."</td>
    <td>".$data[‘author’]."</td> "; ?>
    <td><input type="checkbox" name="id[<?php echo $i;?>]" value="<?php echo $data[‘id’];?>" /></td>
    <?php
    $i++;
    }
    echo "</table>";
    ?>
    <td> <input type="submit" value="Delete" onClick="return warning();" name="submit">
    <input type="reset" value="Cancel" name="reset"> </td>
    </form>
    </body>

    </html> [/sourcecode]

  2. simpan dengan nama student_data1.php

Step 5 : Membuat Javascript untuk menampilkan warning

  1. Ketikkan script berikut,
    [sourcecode language=”javascript”]
    function warning() {
    return confirm(‘Are You Sure to Delete This Data?’);
    }
    [/sourcecode]
  2. simpan dengan nama formupdate.php

Step 6 : Membuat Javascript untuk mendapatkan komponen yang tercentang checkbox nya

  1. Ketikkan script berikut,
    [sourcecode language=”javascript”]
    function pilihan()
    {
    // read the component from ‘myform’
    var jumKomponen = document.myform.length;
    // no check all
    if (document.myform[0].checked == false)
    {
    for (i=1; i<=jumKomponen; i++)
    {
    if (document.myform[i].type == "checkbox") document.myform[i].checked = false;
    }
    }
    }
    [/sourcecode]
  2. simpan dengan nama pilihan.js

Step 7 : Membuat Script untuk Menghapus Data Multi

  1. Ketikkan script berikut,
    [sourcecode language=”php”]
    <?php
    include ‘connect.php’;
    $data = $_POST[‘id’]; //get all the id book that will be deleted

    foreach($data as $data1) { //looping according to the total data that checked
    //echo $data1;
    $query = "DELETE FROM tb_book where id = $data1"; //the query to delete data according to id
    $result = mysql_query($query);
    }
    if ($result) {
    include "student_data1.php";
    echo "Delete sucess";
    }
    ?>
    [/sourcecode]

  2. simpan dengan nama prosesdeletemulti.php

Step 8 : Testing Code

  1. Pergi ke http://localhost/tutorphp/student_data1.php. Beri tanda centang pada data yang ingin anda delete.
  2. Muncul konfirmasi hapus data. Pilih OK untuk menghapus data
  3. Maka konfirmasi sukses delete ditampilkan. Cek juga database anda, pastikan bahwa data telah terhapus πŸ˜€

Untuk penjelasan mengenai baris script-script diatas, bisa dilihat di komentar script… and feel free to comment πŸ˜€
OK. Haaaaaaaapppy Coding! πŸ˜€

Kategori
PHP

Delete Mysql Data Function with PHP

Case Study : Create function to delete data on mysql database.
Requirements : Webserver Packages, already installed.

Delete function will be done one by one, so, here it is.

Step 1 : Prepare the Database

  1. Create database named db_tutorial
  2. Prepare a table named tb_kota, with structure like picture below,
  3. Insert some sample data like below,
  4. Done!

Step 2 : Prepare the work directory

  1. Create folder named tutorphp in your document root
  2. Save all file in this tutorial in this folder.

Step 3 : Create a connection to DB script

  1. Type the following script,
    [sourcecode language=”php”]
    <?php
    $host = "localhost";
    $user = "root";//adjust according to your mysql setting
    $pass = ""; //adjust according to your mysql setting, i use no password here
    $dbName = "db_tutorial";
    mysql_connect($host, $user, $pass);
    mysql_select_db($dbName)
    or die ("Connect Failed !! : ".mysql_error());
    ?>
    [/sourcecode]
  2. Save with the name connect.php

Step 4 : Script to show the data

  1. Type the following script,
    [sourcecode language=”php”]
    <html><head>
    <title>Itx.Web.Id</title>
    <script type="text/javascript" src="warning.js"></script>
    </head>
    <body>
    <h2> Student’s Data <h2>
    <?php
    include ‘connect.php’;
    $query = "SELECT * FROM tb_student"; //the query for get all data in tb_student
    $result = mysql_query($query);

    echo "<table border=’0′ cellpadding=’4′ cellspacing=’4′>";
    echo "<tr bgcolor=’orange’ align=’center’>
    <td> <b> No </b> </td>
    <td> <b> Name </b> </td>
    <td> <b> Address </b> </td>
    <td> <b> Action </b> </td>
    </tr>";
    while ($data = mysql_fetch_array($result)) //mysql_fetch_array = get the query data into array
    {
    echo "<tr align=’center’>
    <td>".$data[‘no’]."</td>
    <td>".$data[‘name’]."</td>
    <td>".$data[‘address’]."</td> "; ?>
    <td> <i> <a href="prosesdelete.php?no=<?php echo $data[‘no’];?>" onClick="return warning();"> Del </a> </i></td>
    <?php
    }
    echo "</table>";
    ?>
    </body>

    </html>
    [/sourcecode]

  2. Save with the name student_data.php

Step 5 : Create javascript to show warning

  1. Type the following script,
    [sourcecode language=”javascript”]
    function warning() {
    return confirm(‘Are You Sure to Delete This Data?’);
    }
    [/sourcecode]
  2. Save with the name formupdate.php

Step 6 : Create script to process delete

  1. Type the following script,
    [sourcecode language=”php”]
    <?php
    include "connect.php";
    //get the value from form update
    $no = $_GET[‘no’]; //get the no which will deleted

    //query for update data in database
    $query = "DELETE from tb_student WHERE no = ‘$no’" ;
    $hasil = mysql_query($query);
    //see the result
    if ($hasil) {
    include "data.php";
    echo "<h4> delete data success </h4>";
    }
    ?>
    [/sourcecode]

  2. Save with the name prosesdelete.php

Step 7 : Testing Code

  1. Go to http://localhost/tutorphp/date.php. Click delete in one of the data showed.
  2. When confirmation window appear, choose OK.
  3. Thus the success conformation appear, and the data has been deleted. Check your database, too. Make sure that the data really deleted πŸ˜€

For the explanation of the script just see the comment script or ask here… and feel free to comment πŸ˜€
OK. Haaaaaaaapppy Coding! πŸ˜€

Kategori
PHP

Create UPDATE Database Function with PHP

Case Study : Create update function to update student data in database
Requirements : Webserver Packages, already installed.

Ok, Here we go.

Step 1 : Prepare Database

  1. Create database named db_tutorial
  2. Prepare table named tb_student, with structure as below.
  3. Insert some sample data like below
  4. Done!

Step 2 : Prepare the work directory

  1. Create folder named tutorphp in your document root
  2. Save all file in this tutorial in this folder.

Step 3 : Create a connection to DB script

  1. Type the following script,
    [sourcecode language=”php”]
    <?php
    $host = "localhost";
    $user = "root";//adjust according to your mysql setting
    $pass = ""; //adjust according to your mysql setting, i use no password here
    $dbName = "db_tutorial";
    mysql_connect($host, $user, $pass);
    mysql_select_db($dbName)
    or die ("Connect Failed !! : ".mysql_error());
    ?>
    [/sourcecode]
  2. Save with the name connect.php

Step 4 : Script to show the data

  1. Type the following script,
    [sourcecode language=”php”]
    <h2> Student’s Data <h2>
    <?php
    include ‘connect.php’;
    $query = "SELECT * FROM tb_student"; //the query for get all data in tb_student
    $result = mysql_query($query);

    echo "<table border=’0′ cellpadding=’2′ cellspacing=’2′>";
    echo "<tr bgcolor=’orange’ align=’center’>
    <td> <b> No </b> </td>
    <td> <b> Name </b> </td>
    <td> <b> Address </b> </td>
    <td> <b> Action </b> </td>
    </tr>";
    while ($data = mysql_fetch_array($result)) //mysql_fetch_array = get the query data into array
    {
    echo "<tr align=’center’>
    <td>".$data[‘no’]."</td>
    <td>".$data[‘name’]."</td>
    <td>".$data[‘address’]."</td>
    <td> <i> <a href=’formupdate.php?no=".$data[‘no’]."’> Update </a> </i></td>
    </tr>";
    }
    echo "</table>";
    ?>
    [/sourcecode]

  2. Save with the name data.php

Step 5 : Create script to show update form

  1. Type the following script,
    [sourcecode language=”php”]
    <?php
    include ‘connect.php’;
    $no = $_GET[‘no’]; //get the no which will updated
    $query = "SELECT * FROM tb_student WHERE no = $no"; //get the data that will be updated
    $hasil = mysql_query($query);
    $data = mysql_fetch_array($hasil);
    ?>
    <form method="post" action="prosesupdate.php">
    <table width="500" border="0" cellpadding="2" cellspacing="2">
    <tr bgcolor="orange">
    <td height="21" colspan="3">
    <strong> Form Update</strong>
    </td>

    <tr>
    <td width="23%"> No </td>
    <td width="2%">:</td>
    <td width="75%"> <input type="text" name="no" disabled=’disable’ value="<?php echo $data[‘no’]; ?>"> </td>
    </tr>

    <tr>
    <td>Name</td>
    <td>:</td>
    <td> <input type="text" name="name" value="<?php echo $data[‘name’]; ?>"> </td>
    </tr>

    <tr>
    <td>Address</td>
    <td>:</td>
    <td> <textarea name="address"><?php echo $data[‘address’]; ?></textarea></td>
    </tr>
    <tr>
    <td></td> <td></td> <td> <input type="hidden" name="no" value="<?php echo $data[‘no’]; ?>">
    <input type="SUBMIT" name="SUBMIT" value="Save"></td>
    </tr>
    </table>
    </form>
    [/sourcecode]

  2. Save with the name formupdate.php

Step 6 : Script to update data

  1. Type the following script,
    [sourcecode language=”php”]
    <?php
    include "connect.php";
    //get the value from form update
    $no = $_POST[‘no’];
    $name = $_POST[‘name’];
    $address = $_POST[‘address’];

    //query for update data in database
    $query = "UPDATE tb_student SET name = ‘$name’, address = ‘$address’ WHERE no = ‘$no’" ;
    $hasil = mysql_query($query);
    //see the result
    if ($hasil) {
    include "data.php";
    echo "<h4> update data success </h4>";
    }
    ?>
    [/sourcecode]

  2. Save with the name prosesupdate.php

Step 7 : Testing Code

  1. Go to http://localhost/tutorphp/date.php. Click update in one of the data.
  2. You will see the form filled with the data. See that all date changeable, except field ‘no’ is inactive (because it is an id). Fill with new data, and then save.
  3. You will see the data has been updated πŸ˜€

OK. Haaaaaaaapppy Coding! πŸ˜€

Kategori
PHP

Fungsi Delete Data dalam Mysql dengan PHP

Studi Kasus : Membuat Fungsi untuk menghapus data dalam database (mysql)
Kebutuhan : Webserver Packages, already installed.

Untuk kasus kali ini, proses hapus dilakukan satu per satu pada data yang ingin dihapus. Ok, langsung praktik saja.

Step 1 : Persiapkan Database

  1. Buat database dengan nama db_tutorial
  2. Siapkan tabel dengan nama tb_student, dengan struktur tabel seperti gambar dibawah ini.
  3. Insert kan beberapa sample data, seperti gambar dibawah
  4. Done!

Step 2 : Persiapkan Folder Kerja

  1. Buat folder dengan nama tutorphp dalam document root anda
  2. Simpan semua file dalam tutorial ini dalam folder tersebut.

Step 3 : Membuat script koneksi ke Database

  1. Ketikkan script berikut,
    [sourcecode language=”php”]
    <?php
    $host = "localhost";
    $user = "root";//adjust according to your mysql setting
    $pass = ""; //adjust according to your mysql setting, i use no password here
    $dbName = "db_tutorial";
    mysql_connect($host, $user, $pass);
    mysql_select_db($dbName)
    or die ("Connect Failed !! : ".mysql_error());
    ?>
    [/sourcecode]
  2. simpan dengan nama connect.php

Step 4 : Membuat Script untuk menampilkan data

  1. Ketikkan script berikut,
    [sourcecode language=”php”]
    <html><head>
    <title>Itx.Web.Id</title>
    <script type="text/javascript" src="warning.js"></script>
    </head>
    <body>
    <h2> Student’s Data <h2>
    <?php
    include ‘connect.php’;
    $query = "SELECT * FROM tb_student"; //the query for get all data in tb_student
    $result = mysql_query($query);

    echo "<table border=’0′ cellpadding=’4′ cellspacing=’4′>";
    echo "<tr bgcolor=’orange’ align=’center’>
    <td> <b> No </b> </td>
    <td> <b> Name </b> </td>
    <td> <b> Address </b> </td>
    <td> <b> Action </b> </td>
    </tr>";
    while ($data = mysql_fetch_array($result)) //mysql_fetch_array = get the query data into array
    {
    echo "<tr align=’center’>
    <td>".$data[‘no’]."</td>
    <td>".$data[‘name’]."</td>
    <td>".$data[‘address’]."</td> "; ?>
    <td> <i> <a href="prosesdelete.php?no=<?php echo $data[‘no’];?>" onClick="return warning();"> Del </a> </i></td>
    <?php
    }
    echo "</table>";
    ?>
    </body>

    </html>
    [/sourcecode]

  2. simpan dengan nama student_data.php

Step 5 : Membuat Javascript untuk menampilkan warning

  1. Ketikkan script berikut,
    [sourcecode language=”javascript”]
    function warning() {
    return confirm(‘Are You Sure to Delete This Data?’);
    }
    [/sourcecode]
  2. simpan dengan nama formupdate.php

Step 6 : Membuat Script untuk Menghapus Data

  1. Ketikkan script berikut,
    [sourcecode language=”php”]
    <?php
    include "connect.php";
    //get the value from form update
    $no = $_GET[‘no’]; //get the no which will deleted

    //query for update data in database
    $query = "DELETE from tb_student WHERE no = ‘$no’" ;
    $hasil = mysql_query($query);
    //see the result
    if ($hasil) {
    include "data.php";
    echo "<h4> delete data success </h4>";
    }
    ?>
    [/sourcecode]

  2. simpan dengan nama prosesdelete.php

Step 7 : Testing Code

  1. Pergi ke http://localhost/tutorphp/date.php. Klik delete pada salah satu data yang ditampilkan.
  2. Muncul konfirmasi hapus data. Pilih OK untuk menghapus data
  3. Maka konfirmasi sukses delete ditampilkan. Cek juga database anda, pastikan bahwa data telah terhapus πŸ˜€

Untuk penjelasan mengenai baris script-script diatas, bisa dilihat di komentar script… and feel free to comment πŸ˜€
OK. Haaaaaaaapppy Coding! πŸ˜€

Kategori
PHP

Membuat Fungsi Update Data dalam Database dengan PHP Mysql

Studi Kasus : Membuat Fungsi untuk mengupdate data dalam database (mysql)
Kebutuhan : Webserver Packages, already installed.

Ok, langsung praktik saja.

Step 1 : Persiapkan Database

  1. Buat database dengan nama db_tutorial
  2. Siapkan tabel dengan nama tb_student, dengan struktur tabel seperti gambar dibawah ini.
  3. Insert kan beberapa sample data, seperti gambar dibawah
  4. Done!

Step 2 : Persiapkan Folder Kerja

  1. Buat folder dengan nama tutorphp dalam document root anda
  2. Simpan semua file dalam tutorial ini dalam folder tersebut.

Step 3 : Membuat script koneksi ke Database

  1. Ketikkan script berikut,
    [sourcecode language=”php”]
    <?php
    $host = "localhost";
    $user = "root";//adjust according to your mysql setting
    $pass = ""; //adjust according to your mysql setting, i use no password here
    $dbName = "db_tutorial";
    mysql_connect($host, $user, $pass);
    mysql_select_db($dbName)
    or die ("Connect Failed !! : ".mysql_error());
    ?>
    [/sourcecode]
  2. simpan dengan nama connect.php

Step 4 : Membuat Script untuk menampilkan data

  1. Ketikkan script berikut,
    [sourcecode language=”php”]
    <h2> Student’s Data <h2>
    <?php
    include ‘connect.php’;
    $query = "SELECT * FROM tb_student"; //the query for get all data in tb_student
    $result = mysql_query($query);

    echo "<table border=’0′ cellpadding=’2′ cellspacing=’2′>";
    echo "<tr bgcolor=’orange’ align=’center’>
    <td> <b> No </b> </td>
    <td> <b> Name </b> </td>
    <td> <b> Address </b> </td>
    <td> <b> Action </b> </td>
    </tr>";
    while ($data = mysql_fetch_array($result)) //mysql_fetch_array = get the query data into array
    {
    echo "<tr align=’center’>
    <td>".$data[‘no’]."</td>
    <td>".$data[‘name’]."</td>
    <td>".$data[‘address’]."</td>
    <td> <i> <a href=’formupdate.php?no=".$data[‘no’]."’> Update </a> </i></td>
    </tr>";
    }
    echo "</table>";
    ?>
    [/sourcecode]

  2. simpan dengan nama data.php

Step 5 : Membuat Script untuk menampilkan form Update

  1. Ketikkan script berikut,
    [sourcecode language=”php”]
    <?php
    include ‘connect.php’;
    $no = $_GET[‘no’]; //get the no which will updated
    $query = "SELECT * FROM tb_student WHERE no = $no"; //get the data that will be updated
    $hasil = mysql_query($query);
    $data = mysql_fetch_array($hasil);
    ?>
    <form method="post" action="prosesupdate.php">
    <table width="500" border="0" cellpadding="2" cellspacing="2">
    <tr bgcolor="orange">
    <td height="21" colspan="3">
    <strong> Form Update</strong>
    </td>

    <tr>
    <td width="23%"> No </td>
    <td width="2%">:</td>
    <td width="75%"> <input type="text" name="no" disabled=’disable’ value="<?php echo $data[‘no’]; ?>"> </td>
    </tr>

    <tr>
    <td>Name</td>
    <td>:</td>
    <td> <input type="text" name="name" value="<?php echo $data[‘name’]; ?>"> </td>
    </tr>

    <tr>
    <td>Address</td>
    <td>:</td>
    <td> <textarea name="address"><?php echo $data[‘address’]; ?></textarea></td>
    </tr>
    <tr>
    <td></td> <td></td> <td> <input type="hidden" name="no" value="<?php echo $data[‘no’]; ?>">
    <input type="SUBMIT" name="SUBMIT" value="Save"></td>
    </tr>
    </table>
    </form>
    [/sourcecode]

  2. simpan dengan nama formupdate.php

Step 6 : Membuat Script untuk Mengupdate Data

  1. Ketikkan script berikut,
    [sourcecode language=”php”]
    <?php
    include "connect.php";
    //get the value from form update
    $no = $_POST[‘no’];
    $name = $_POST[‘name’];
    $address = $_POST[‘address’];

    //query for update data in database
    $query = "UPDATE tb_student SET name = ‘$name’, address = ‘$address’ WHERE no = ‘$no’" ;
    $hasil = mysql_query($query);
    //see the result
    if ($hasil) {
    include "data.php";
    echo "<h4> update data success </h4>";
    }
    ?>
    [/sourcecode]

  2. simpan dengan nama prosesupdate.php

Step 7 : Testing Code

  1. Pergi ke http://localhost/tutorphp/date.php. Klik update pada salah satu data yang ditampilkan.
  2. Anda akan melihat form yang berisi data yang akan diupdate. Lihat bahwa data yang ada dapat diganti, kecuali data ‘no’ yang tidak aktif (tidak dapat diedit karena merupakan data yang akan digunakan sebagai acuan). Isi data baru, dan klik save.
  3. Anda akan melihat data yang telah diupdate

OK. Haaaaaaaapppy Coding! πŸ˜€

Kategori
PHP

Create Dynamic Combobox Form from Database (Mysql) with PHP

Case Study : Create dynamic combobox with dynamic value
Requirements : Webserver Packages, already installed.

Combobox is one element in a form that is often used in applications – the application registration, generally combobox is used to select one option where there are many options available. Value in the combobox can actually be written directly in the html, but, what if the data you want to appear very much or depend on certain conditions?
Suppose, we want to show the choice of cities – cities that exist within the Indonesian state, the city is also a city which appears to be in Indonesia.
For example, a user was coming from England, the town which is also a city which appears to be in the UK.

We need dynamic combobox

Then, here we go.

Step 1 : Prepare the Database

  1. Create database named db_tutorial
  2. Prepare a table named tb_kota, with structure like picture below,
  3. Insert some sample data like below,
  4. Done!

Step 2 : Prepare the work directory

  1. Create folder named tutorphp in your document root
  2. Save all file in this tutorial in this folder.

Step 3 : Create a connection to DB script

  1. Type the following script,
    [sourcecode language=”php”]
    <?php
    $host = "localhost";
    $user = "root";//adjust according to your mysql setting
    $pass = ""; //adjust according to your mysql setting, i use no password here
    $dbName = "db_tutorial";
    mysql_connect($host, $user, $pass);
    mysql_select_db($dbName)
    or die ("Connect Failed !! : ".mysql_error());
    ?>
    [/sourcecode]
  2. Save with the name connect.php

Step 4 : Create the combobox form

  1. Type the following script,
    [sourcecode language=”php”]
    <form name=’form’ method=’post’ action=’prosescombo.php’>
    <h3> Choose Your City</h3>
    <select name="kota">
    <option value=0 selected>- city -</option>
    <?php
    include ‘connect.php’;
    $q = mysql_query("select * from tb_kota where negara = ‘Indonesia’ "); //choose the city from indonesia only

    while ($row1 = mysql_fetch_array($q)){
    echo "<option value=$row1[kota]>$row1[kota]</option>";
    }
    ?>
    </select>
    <input type="submit" name="submit" value="Submit">
    </form>
    [/sourcecode]

  2. Save with the name formcombo.php

Step 5 : Create script to show the result

  1. Type the following script,
    [sourcecode language=”php”]
    <?php
    $kota = $_POST[‘kota’];

    if ($kota == ‘0’) {
    echo "anda belum memilih";
    } else
    echo "anda memilih ".$kota;
    ?>
    [/sourcecode]

  2. Save with the name prosescombo.php

Step 6 : Testing Code

  1. Go to http://localhost/tutorphp/formcombo.php. You will see the form like below. Choose one option (i choose Solo, here).
  2. Choose submit. And see the result πŸ˜€

OK. Haaaaaaaapppy Coding! πŸ˜€

Kategori
PHP

Membuat Form ComboBox Dinamis dari Database (Mysql) dengan PHP

Studi Kasus : Membuat form combobox dengan isian dinamis dari database (mysql)
Kebutuhan : Webserver Packages, already installed.

Combobox merupakan salah satu element form yang sering digunakan dalam aplikasi – aplikasi pendaftaran, pada umumnya combobox digunakan untuk memilih salah satu option dimana terdapat banyak option yang ada. Value dalam combobox sebenarnya dapat ditulis langsung dalam html, namun, bagaimana jika data yang ingin ditampilkan sangat banyak atau tergantung pada kondisi tertentu?
Misalkan, kita ingin menampilkan pilihan kota – kota yang ada dalam negara Indonesia, maka kota yang ditampilkan juga merupakan kota yg berada dalam Indonesia.
Misalkan, user ternyata berasal dari Inggris, maka kota yang ditampilkan juga merupakan kota yg berada dalam negara Inggris.

Kita memerlukan combobox dinamis.

Ok, langsung praktik saja.

Step 1 : Persiapkan Database

  1. Buat database dengan nama db_tutorial
  2. Siapkan tabel dengan nama tb_kota, dengan struktur tabel seperti gambar dibawah ini.
  3. Insert kan beberapa sample data, seperti gambar dibawah
  4. Done!

Step 2 : Persiapkan Folder Kerja

  1. Buat folder dengan nama tutorphp dalam document root anda
  2. Simpan semua file dalam tutorial ini dalam folder tersebut.

Step 3 : Membuat script koneksi ke Database

  1. Ketikkan script berikut,
    [sourcecode language=”php”]
    <?php
    $host = "localhost";
    $user = "root";//adjust according to your mysql setting
    $pass = ""; //adjust according to your mysql setting, i use no password here
    $dbName = "db_tutorial";
    mysql_connect($host, $user, $pass);
    mysql_select_db($dbName)
    or die ("Connect Failed !! : ".mysql_error());
    ?>
    [/sourcecode]
  2. simpan dengan nama connect.php

Step 4 : Membuat form combobox dinamis

  1. Ketikkan script berikut,
    [sourcecode language=”php”]
    <form name=’form’ method=’post’ action=’prosescombo.php’>
    <h3> Choose Your City</h3>
    <select name="kota">
    <option value=0 selected>- city -</option>
    <?php
    include ‘connect.php’;
    $q = mysql_query("select * from tb_kota where negara = ‘Indonesia’ "); //choose the city from indonesia only

    while ($row1 = mysql_fetch_array($q)){
    echo "<option value=$row1[kota]>$row1[kota]</option>";
    }
    ?>
    </select>
    <input type="submit" name="submit" value="Submit">
    </form>
    [/sourcecode]

  2. simpan dengan nama formcombo.php

Step 5 : Membuat menampilkan pilihan

  1. Ketikkan script berikut,
    [sourcecode language=”php”]
    <?php
    $kota = $_POST[‘kota’];

    if ($kota == ‘0’) {
    echo "anda belum memilih";
    } else
    echo "anda memilih ".$kota;
    ?>
    [/sourcecode]

  2. simpan dengan nama prosescombo.php

Step 6 : Testing Code

  1. Pergi ke http://localhost/tutorphp/formcombo.php. Anda akan melihat form seperti dibawah. Pilih salah satu option (Disini saya memilih Solo)
  2. Klik Submit dan anda akan melihat hasilnya

OK. Haaaaaaaapppy Coding! πŸ˜€

Kategori
PHP

PHP Form Input Date with Datetimepicker JQuery

Case Study : Create Form Register with one of the field input using datetimepicker jquery.
Requirements :

  1. Webserver Packages, already installed.
  2. jQuery library, download here
  3. UI Core, download here, dan UI Datepicker, download here
  4. Theme Roller, download here, you can design your own theme, or download available theme. I used “sunny” theme.

Follow this steps.

Step 1 : Prepare the Work Folder

  1. Create folder named tutorphp in your document root
  2. Save file jQuery library, UI Core, UI Datepicker, and Theme (download above), so the structure of the folder is show below,

Step 2 : HTML – Form

  1. Type the following script,
    [sourcecode language=”php”]
    <link type="text/css" rel="stylesheet" href="sunny/jquery-ui-1.8.2.custom.css" />
    <script type="text/javascript" src="jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="jquery.ui.datepicker.js"></script>
    <script type="text/javascript" src="jquery.ui.core.js"></script>
    <script type="text/javascript" src="tanggal.js"></script>

    <center><h1>Form Pendaftaran</h1>
    <form method="post" action="tampil.php">
    <table>
    <tr><td>Nama</td><td><input type="text" name="nama"></td></tr>
    <tr><td>Alamat</td><td><input type="text" name="alamat"></td></tr>
    <tr><td>Tgl Lahir</td><td><input type="text" id="tgl_lahir" name="tgl_lahir"></td></tr>
    <tr><td></td><td><input type="submit" name="submit" value="Submit"></td></tr>
    </table>
    </form>
    </center>
    [/sourcecode]

  2. Save with the name form.php, and save in the tutorphp folder

Step 3 : Javascript – Datepicker

  1. Type the following script,
    [sourcecode language=”javascript”]
    $(document).ready(
    function() {
    $(function() {
    $("#tgl_lahir").datepicker({
    showButtonPanel: true,
    //minDate: new Date(),
    showTime: true
    });
    });
    });
    [/sourcecode]
  2. Save with the name tanggal.js, save in the tutorphp folder
  3. This Javascript will show datetimepicker jQuery in the field input with id tgl_lahir

Step 4 : PHP – Showing the Result

  1. Fo==Type the following script,
    [sourcecode language=”php”]
    <?php
    $nama = $_POST[‘nama’];
    $alamat = $_POST[‘alamat’];
    $tgl_lahir = $_POST[‘tgl_lahir’];

    echo $nama.'<br>’;
    echo $alamat.'<br>’;
    echo $tgl_lahir;
    ?>
    [/sourcecode]

  2. Save with the name form.php, and save in the tutorphp folder

Step 5 : Testing Code

  1. Go to http://localhost/tutorphp/form.php. You will see form like below. Fill the field, and then click input Tanggal field, so your datepicker will showed like below πŸ˜€
  2. Choose submit, and you will see the data πŸ˜€
Kategori
PHP

Form Input Tanggal PHP dengan Datetimepicker JQuery

Case Study : Membuat form pendaftaran dengan salah satu input tanggal menggunakan datetimepicker jquery
Requirements :

  1. Webserver Packages, already installed.
  2. jQuery library, download here
  3. UI Core, download here, dan UI Datepicker, download here
  4. Theme Roller, download here, anda bisa mendesign tema sendiri untuk datepicker, atau mendownload theme yang sudah tersedia. Saya menggunakan theme dengan nama sunny.

Ikuti langkah-langkah dibawah.

Step 1 : Persiapkan Folder Kerja

  1. Buat folder dengan nama tutorphp dalam document root anda
  2. Simpan file jQuery library, UI Core, UI Datepicker, dan Theme (dapat didownload dari link bagian kebutuhan diatas),sehingga struktur folder seperti gambar berikut,

Step 2 : HTML – Form

  1. Ketikkan script berikut,
    [sourcecode language=”php”]
    <link type="text/css" rel="stylesheet" href="sunny/jquery-ui-1.8.2.custom.css" />
    <script type="text/javascript" src="jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="jquery.ui.datepicker.js"></script>
    <script type="text/javascript" src="jquery.ui.core.js"></script>
    <script type="text/javascript" src="tanggal.js"></script>

    <center><h1>Form Pendaftaran</h1>
    <form method="post" action="tampil.php">
    <table>
    <tr><td>Nama</td><td><input type="text" name="nama"></td></tr>
    <tr><td>Alamat</td><td><input type="text" name="alamat"></td></tr>
    <tr><td>Tgl Lahir</td><td><input type="text" id="tgl_lahir" name="tgl_lahir"></td></tr>
    <tr><td></td><td><input type="submit" name="submit" value="Submit"></td></tr>
    </table>
    </form>
    </center>
    [/sourcecode]

  2. simpan dengan nama form.php, dan simpan dalam folder tutorphp

Step 3 : Javascript – Pembaca Tanggal Datepicker

  1. Ketikkan script berikut,
    [sourcecode language=”javascript”]
    $(document).ready(
    function() {
    $(function() {
    $("#tgl_lahir").datepicker({
    showButtonPanel: true,
    //minDate: new Date(),
    showTime: true
    });
    });
    });
    [/sourcecode]
  2. simpan dengan nama tanggal.js, simpan dalam folder tutorphp
  3. Script Javascript ini akan menampilkan datetimepicker jQuery pada bagian field input dengan id tgl_lahir

Step 4 : PHP – untuk menampilkan

  1. Ketikkan script berikut,
    [sourcecode language=”php”]
    <?php
    $nama = $_POST[‘nama’];
    $alamat = $_POST[‘alamat’];
    $tgl_lahir = $_POST[‘tgl_lahir’];

    echo $nama.'<br>’;
    echo $alamat.'<br>’;
    echo $tgl_lahir;
    ?>
    [/sourcecode]

  2. simpan dengan nama form.php, dan simpan dalam folder tutorphp

Step 5 : Testing Code

  1. Pergi ke http://localhost/tutorphp/form.php. Anda akan melihat form seperti dibawah. Isikan field-filed, kemudian klik pada field input Tanggal, maka datepicker anda akan muncul seperti gambar dibawah:D
  2. Pilih submit, maka data akan ditampilkan
Kategori
PHP

Create Thumbnail Version from Image with PHP

Case Study : Create Thumbnail Version from Image with PHP GD Library
Requirements : Webserver Packages, already installed. And make sure your PHP support Image GD Library (version 1-8 above)
Follow this step..

Step 1 : Prepare the Work Folder

  1. Create folder named tutorphp in your document root
  2. Prepare sample JPG image in this folder. For this tutorial, i use this sample image (p.s. : you can use any jpeg image). If you want to use this image, just right click and save as
  3. Rename the image to myPic.jpg (p.s. : this “rename” things just to make easy for follow the tutorial πŸ˜› )

Step 2 : Create main script to resize image in to thumbnail

  1. Type the following script,
    [sourcecode language=”php”]
    <?php
    $image = ‘myPic.jpg’; //default image, change here if you want to use another image

    //get the image size and image info
    list($width_orig, $height_orig, $image_type) = getimagesize($image);

    if($image_type !== 2) { // 2 is for JPEG Image
    echo ‘Image is not JPEG Image!’;
    }
    else {
    $thumbname = ‘thumbnail_’.$image; //default name for thumbnail version of image

    // setting the height for the width 75px (75px is default width for the thumbnail). this is for maintain the ratio
    $height_tb = (int) ((75 / $width_orig) * $height_orig);

    //Create a new true color image
    $image_p = imagecreatetruecolor(75, $height_tb);

    //Create a new JPEG image from file or URL
    $image = imageCreateFromJpeg($image); //

    //Copy and resize part of an image with resampling
    imagecopyresampled($image_p, $image, 0, 0, 0, 0, 75, $height_tb, $width_orig, $height_orig);

    //upload image to folder
    if(!is_writeable(dirname($thumbname)))
    {
    echo ‘Unable to Upload image to ‘ . dirname($thumbname);
    }
    else
    {
    //output image to browser or file, the parameter is imageJPEG(resource image, name of the image, quality)
    imageJpeg($image_p, $thumbname, 100);
    }
    }
    ?>
    <center><h1>Create Thumbnail Image</h1>
    <table border=’1′ cellpadding=’5′ cellspacing=’5′>
    <tr align=’center’> <td>Original</td> <td>Thumbnail</td> </tr>
    <tr> <td><img src="myPic.jpg" alt="image" /></td> <td><img src="<?php echo $thumbname;?>" alt="thumbnail" /></td></tr>
    </table>
    <center>
    [/sourcecode]

  2. Save with the name imagetb.php, save in the tutorphp folder
  3. Explanation : see on the script (script with green) color, Okay

Step 3 : Testing Code

  1. Go to http://localhost/tutorphp/imagetb.php
  2. You can see your image (original) with its thumbnail πŸ˜€ just like the picture below..
  3. Check tutor.php folder. You will see the thumbnail_myPic.jpg file, that is thumbnail version of your image πŸ˜€

πŸ˜€