TUTORIAL MENAMBAHKAN DATA KE DATABASE MySql MENGGUNAKAN WEB PHP (CRUD #1)

Ohayoo, Kali ini saya masih akan membahas langkah lanjutan pada pembuatan website sederhana. Pada kesempatan kali ini saya akan membahas tentang fungsi dasar sebuah website yaitu CRUD (Create, Read, Update, Delete).

Pada dasarnya sebuah website selalu menggunakan 4 fungsi tersebut sebagai acuan utama, namun pada beberapa website fungsi tersebut dimanipulasi sedemikian rupa sehingga memiliki fungsi yang berbeda dan unik sesuai keinginan programmer.

Pada tutorial sebelumnya kita telah belajar tentang cara mengkoneksikan website dengan database. Jadi pada tutorial kali ini, saya akan membahas tentang 4 fungsi dasar sebuah aplikasi yaitu CRUD (Create, Read, Update, Delete).

Kita mulai dengan fungsi yang pertama, yaitu Create. Fungsi ini merupakan salah satu fungsi dasar dalam sebuah aplikasi, kegunaan fungsi ini adalah menambahkan data ke dalam database atau direktori aplikasi sesuai keinginan user atau pengguna. Dalam sebuah website, tentunya kita juga sering menjumpai beberapa fungsi Create, misalnya pada kolom pendaftaran dan kolom komentar. Nah!, pada tutorial kali ini saya akan membahas tentang bagaimana cara menambahkan data ke dalam database MySql menggunakan Web PHP.

Oke, langsung ke TeKaPe..

Seperti tutorial sebelumnya, saya masih menggunakan XAMPP untuk localhost servernya dan juga SUBLIME TEXT 2 untuk aplikasi penulisan kodingnya.

                Pertama, pastikan XAMPP aktif, silahkan cek pada control panel XAMPP untuk memastikannya. Perhatikan gambar berikut,

Kedua, buka aplikasi SUBLIME TEXT 2,

                Untuk lebih memudahkan silahkan simpan terlebih dahulu dalam folder yang sama seperti tutorial sebelumnya dengan nama “input.php”.

Simpan dalam direktori tempat dimana anda menginstall aplikasi XAMPP, kemudian cari folder xampp, lalu pilih folder htdocs, lalu pilih websitepertama. (sesuai folder yang telah kita buat pada tutorial sebelumnya).

                Kita buat table terlebih dahulu pada database yang telah kita buat sebelumnya.

                Bukalah Browser anda (disini saya menggunakan Chrome), dan tuliskan http://localhost atau http://127.0.0.1 pada tab url dalam browser anda, sehingga muncul gambar seperti berikut.

                Kemudian pilih phpMyAdmin, dan perhatikan pada kolom bagian kiri dalam browser anda, disana akan ditampilkan seluruh database yang telah anda buat. Pada tutorial sebelumnya kita telah membuat database dengan nama “dbweb1”, kemudian kita klik database tersebut.

                Kemudian ketikan nama table yang ingin anda buat pada kolom “Create new table on database dbweb1”, tuliskan saja data pada kolom “Name” dan berikan angka 1 pada kolom “Number of Fields” seperti pada gambar dan kemudian klik “Go”.

                Lalu akan muncul form field yang akan kita isikan pada table yang kita buat, isikan saja seperti berikut ini,

Field = data                          *)Adalah Nama field pada tabel

Type = VARCHAR              *)Untuk mengatur jenis tipe data yang diinputkan

Length/Values = 30             *)Jumlah karakter data yang diinputkan

Index = PRIMARY             *)Acuan sebagai Index, untuk mengantisipasi data yang sama

          Klik save dan akan muncul pesan “Table `dbweb1`.`data` has been created”, seperti gambar dibawah ini

Persiapan  pada database sudah siap, saatnya kita bermain lagi pada kodingan. Buka kembali Sublime Text yang telah kita siapkan diawal tadi.

                Disini kita membutuhkan 2 file kodingan PHP, yaitu kodingan untuk tampilan dan juga kodingan untuk fungsinya. Dan Berikut adalah kodingan untuk tampilannya yang tadi kita beri nama input.php.

<h2>Form Input Data</h2>               

<form method="POST" action="cek_input.php">

  <label>Data :</label><input type="text" name="data" size="20"/>

                <p>

<input type="submit" value="INPUT"></input>

    <input type="button" onclick="window.location.href='index.php';" value="BATAL" ></input> 

                </p>

</form>

Tuliskan kodingan tersebut pada sublime dan kemudian tekan CTRL+S pada keyboard,

Setelah itu kita akan membuat kodingan untuk fungsinya. Tekan CTRL+N untuk mebuat tab baru pada sublime, kemudian ketikan kodingan dibawah ini untuk kodingan fungsinya

<?php

include "koneksi.php";

mysql_query("INSERT INTO data(data)

            VALUES ('$_POST[data]')");

echo "<script>window.alert('Input Data Berhasil.');

            window.location=(href='input.php')</script>";

?>

Setelah itu tekan tombol CTRL+S dan simpan file dengan nama “cek_input.php” pada folder yang sama dengan folder tempat kita menyimpan kodingan “input.php” yang tadi.

Waktunya Pembahasan :

Pada kodingan tampilan atau kodingan input.php, pada awal kodingan kita menemukan penggunaan <h2>Form Input Data</h2> , penggunaan script <h2></h2> adalah untuk merubah tampilan teks pada browser kita nanti, entah itu pada ukuran, jenis, atau warna font. Penggunaan fungsi tersebut biasanya dimanipulasi atau diatur dengan file css untuk memperindah tampilah sebuah website.

<form method="POST" action="cek_input.php"></form>, disini kita menggunakan sebuah script form yang kita manipulasi dengan sebuah perintah method=”POST”, sedikit pengertian tentang penggunaan method POST adalah untuk mengirimkan nilai variable ke halaman lain atau mengirimkan ke database dan mengambil nilai variable dari database ataupun halaman lain. Action=”cek_input.php”, penggunaan fungsi ini adalah untuk mengalihkan halaman ke halaman yang kita inginkan ketika tombol submit dalam form ditekan.

 <label>Data :</label><input type="text" name="data" size="20"/>, pada script bagian ini adalah bagian kita memasukan data variable yang akan kita kirim ke database. Pada bagian ini kita menggunakan script <label></label> untuk menuliskan label yang akan di terjemahkan di browser kita nanti, dan juga kita menggunakan script <input> untuk pembatan texboxt tempat kita mengisikan data variabel yang ingin kita masukan ke database, dalam fungsi input ini kita sertakan nama,type,dan ukuran (dalam satuan pixel) font yang akan ditampilkan pada browser kita.

<p></p>, ini adalah script pembatas, Karena disini saya tidak menggunakan file css jadi fungsi pembatas seperti ini menggunakan style default browser kita.

<input type="submit" value="INPUT"></input>

<input type="button" onclick="window.location.href='index.php';" value="BATAL" ></input>, ini adalah script pembuatan tombol dalam sebuah form pada sebuah website. pada script Value digunakan untuk menuliskan label dalam tombol tersebut. Pada script type digunakan untuk menuliskan jenis, Karena disini kita menginginkan tombol kita bias gunakan submit untuk menuju action yang telah kita tuliskan pada awal form, dan button untuk membuat tombol, script onclick untuk menentukan tujuan halaman ketika tombol ditekan.

Pada kodingan fungsi atau cek_input.php

include "koneksi.php"; Digunakan untuk memanggil sebuah file kedalam website kita. Dalam hal ini kita gunakan fungsi include untuk memanggil koneksi sehingga kita tidak perlu menuliskan ulang kodingan koneksi.php pada file yang membutuhkan koneksi ke database. (pembuatan file koneksi telah kita bahas dalam tutorial sebelumnya).

mysql_query("INSERT INTO data(data) VALUES ('$_POST[data]')"); ini merupakan script query untuk memasukan data variabel yang kita ingikan kedalam database, dalam hal ini kita telat menyetting query untuk memasukan data yang diiputkan di textbot yang bernama data[data] ke dalam table database data dan field bernama (data).

echo "<script>window.alert('Input Data Berhasil.');

window.location=(href='input.php')</script>"; ini adalah script tambahan yang saya masukan sendiri kedalam script tutorial ini. Script ini digunakan untuk menampilkan pesan ketika data variable telah berhasil diinputkan kedalam database. Script ini tidak begitu penting dalam tutorial kali ini, tapi saya sarankan tetap dicantumkan sebagai indicator untuk data yang kita inputkan.

                Setelah kita paham akan pengkodingan fungsi CREATE saatnya kita melakukan pengujian dan melihat apakah kodingan kita berhasil atau tidak?.

Pertama buka kembali database kita tadi seperti gambar berikut ini :

Kemudian tekan CTRL+T pada keyboard, lalu ketikkan http://localhost/websitepertama/input.php pada tab url sehingga muncul halaman seperti berikut ini.

Kemudian masukan data yang ingin kita masukan kedalam textbot (misalnya "test") kemudian tekan input, lalu jika sukses akan muncul pesan pada browser kita seperti gambar berikut ini.

                Klik OK pada pesan tersebut, lalu kita cek dalam database apakah text yang kita tuliskan dalam textbox telah tersimpan kedalam database atau belum.

Buka database yang telah kita buka tadi, kemudian pilih table “data”, dan kemudian pilih tab menu browser, jika sukses akan muncul gambar seperti berikut ini.

                Bagaimana, cukup mudah bukan, silahkan kalian praktekan dan jangan lupa untuk klik share and follow, supaya saya lebih semangat lagi untuk melanjutkan tutorial ini hingga akhir.

Jika banyak kesalahan kata saya mohon maaf, dan terima kasih atas waktunya untuk membaca, salam #TehManis.

• Tweet
• Share
• Share
• Share
• Share

Sign up here with your email