Monday, 2 April 2018

Tutorial membuat CRUD Foto dengan PHP Database MYSQL



Dalam sebuah Website terutama situs jejaring sosial, tidak terlepas dengan yang namanya gambar atau foto. Denga adanya foto atau gambar, memang membuat tampilan suatu website lebih menarik dibandingkan dengan website yang isinya tidak menggunakan gambar atau foto. Foto juga bisa menjadi identitas seseorang apalagi di media sosial, bahkan ada yang menggunakan foto hanya untuk pamer mungkin, bergaya, promosi barang jika berbisnis penjnualan produk, dan masih banyak lagi. Untuk yang bergelut di bidang TI misalnya dalam hal pemograman, pastinya tidak asing lagi kenapa bisa sebuah website menampilkan foto kita yang kita upload dan tidak terjadi kesalahan seperti, misalnya foto kita pas diupload untuk foto profil kita malah foto profil orang lain yang berubah menjadi foto kita. Bagi yang belum tau mungkin bertanya-tanya, kok bisa begitu ?? atau mungkin kok bisa ya ???.

Nah, Pada kesempatan kali ini titikk0ma akan membahas Tutorial CRUD Foto dengan PHP Database MYSQL. Tutorial ini sangant cocok untuk bagi yang sedang atau ingin belajar bagaimana cara upload foto ke database tanpa terjadi kesamaan data.

Langsung saja menuju Teks Editor masing-masing, yang perlu dipersiapkan pastikan anda sudah menginstal Teks Editor, Web Server, dan Browser tentunya.
Jika belum ada :

Download Notepad++ DiSini
Download Sublime Text 3 DiSini
Download Xampp DiSini

Langkah-langkahnya sebagai berikut :
1. Buat sebuah folder project di dalam C:\xampp\htdocs\, misal C:\xampp\htdocs\b\upload_foto. Untuk posisi project bisa disesuaikan, tapi posisinya harus tetap di dalam folder htdocs.

2. Selanjutnya buat Database terlebih dahulu, dan pastikan XAMPP Control apache dan mysql anda sudah running, gambarnya seperti berikut :

3. Langkah selanjutnya buat database, misal namanya b_upload_foto. namany bisa disesuaikan dengan keinginan. Kemudian buat tabel dengan nama tabel tb_foto, kolomnya terdiri dari kolom id, foto. Kolom id sebagai peimery key dan autoincrement type database int(integer), dan foto  type datanya varchar(panjangnya buat 30).

4. Buat file koneksi.php dialam folder project yang dibuat tadi, Berikut Scriptnya :

File ini berfungsi untuk mengkoneksikan database dengan PHP agar data dari database bisa ditampilkan ke browser. Untuk koneksinya disini titikk0ma menggunakan cara membuat objek, seperti contoh diatas. new mysqli(). berarti nama objeknya adalah mysqli dan ditampung didalam variabel $conn. Dan yang didalam kurung itu adalah parameternya dan dipisahkan dengan koma(,).

5. Selanjutnya buat file index.php, Berikut Scriptnya :

File ini berisi tampilan data yang didapatkan dari database, dan form upload foto yang digunakan untuk mengirim data kedatabase.
Baris 23 kita memanggil file koneksi.php, bisa menggunakan require, require_once, include, atau include_once.

Baris 24 kita membuat variabel $no yang nilainya di set samadengan 1.

Baris 25 adalah kode query untuk memnggil data dari database di tabel tb_foto.

Baris 26 - 37, adalah proses menampilkan data dengan cara melakukan perulangan dengan metode WHILE. $query->fetch_assoc() berfungsi agar data tersebut bisa ditampilkan atau dijadikan array. Setiap kode yang ada didalam perulangan, akan terus diulang sebanyak data yang ada pada database karna kita menampilkan data dari database.

6. Buat file proses_upload.php, Berikut Scriptnya :

File ini untuk memproses form yang ada pada file index.php.
Baris 5,6 adalah adalah pembuatan variabel untuk menampung data yang dikirim dari form. $_FILES['foto']['name'], 'foto' adalah name textfield yang ada pada form dan 'name' adalah untuk mengambil nama dari file atai foto yang di upload. 'tmp_name' adalah penyimpanan ke server phpnya agar file bisa di upload ke direktori yang sudah di setting.

Baris 7 adalah proses pemecahan kata menjadi array. Dari kode di atas kata di pecah berdasarka titik (.), jadi setiap ada titik maka kata tersebut bisa menjadi beberapa kata. Baris ini berfungsi untuk mendapatkan extensi dari file yang di upload.

Baris 8 adalah kode untuk memberi nama file sesuai dengan keinginan kita. time() untuk mengambil waktu sekarang, strtolower() unutk membuat semua huruf menjadi kecil.

Baris 10 adalh proses pemberian jenis file apa saja yang bisa di upload, dan nilainya harus berupa array, bisa dengan array() atau [].

Baris 11 adalah kode untuk menampung ektensi file yang ada pada Baris 7. Disini menggunakan end($ex) bukan $ex[1], karna kita akan menggunakan data tersebut menjadi array bukan string, jika $ex[1] data tersebut bersifat string.

Baris 13 adalah kode untuk pengecakan file yang di upload, apakah ekstensinya sama dengan yang sudah didefenisikan atau tidak.

Baris 14, Jika ekstensinya sama pada Baris 13 maka pada baris 14 adalah proses upload file ke dalam folder, yang mana kode diatas mneyimpan di folder foto/$nama_baru. Jika belum ada folder foto tinggal buat saja sebuah folder dengan nama foto dan diletakkan di dalam folder project.

Baris 15 adlah proses menyimpan data ke database.

Baris 17 adalah kode yang ditampilkan ketika file yang di upload tidak sesuai ekstensinya.

7. Buat file edit.php, Berikut Scripnya :

Untuk menampilkan data pada file ini kita tidak menggunakan perulangan seperti pada file index.php, kenapa ?? karna data yang ditampilkan cuma satu berdasarkan $id, $id didapat dari pembuatan metode get pada file index.php tepatnya dibaris 33 dan 34 ?id=( nilai disini didapat dari database).

8. Selanjutnya buat file proses_edit.php Berikut Scriptnya :

Baris 18 adalah pengecakan nama file pada folder foto/ dana namanya di dapat dari form edit.php dengan name foto_lama yang tipe texfilednya hidden, agar data tidak terlihat di browser.

Baris 19 adalah proses penhapusan file yang ada pada folder foto.

9. Terahir buat file delete.php, Berikut Sciprnya :

File ini adalah penghapusan file yang ada pada database dan file yang ada pada folder foto.

Baris 5 adalah proses menampung data yang dikirim dari file index.php tepatnya dibaris 34 ?id=(nilainya didapat dari database) ,

Baris 7,8 adalah proses pemanggilan data dari database sesuai dengan $id yang dikirim tadi,

Baris 10 adalah kode query untuk menghapus data dari database berdasarkan $id yang dikirim tadi.

Baris 12-14 adalh proses pengecekan file yang ada pada folder foto, apakah ada file nya atau tidak, jika ada maka file tersebut akan dihapus dari folder foto.

Download file project DIsini

Bagaimana ??? Mudah bukan... itulah kurang lebihnya Cara membuat CRUD upload foto ke database. Cara diatas baru dara yang sederhana, untuk yang lebih WAW nya tergantung dari kreatif dari pembaca.
Jika ada yang dipertanyakan silhakan tanyakan pada kolom komentar jangan lupa kritik dan sarannya.
Terima kasih sudah mampir... Salam Koding-Koding.

7 comments:

  1. kalau tidak dimasukkan gambar pada saat update ga bkalan mau ke update gan

    ReplyDelete
    Replies
    1. Jika seperti itu, tambahkan kondisi untuk mengecek file gambar, jika gambar null maka update tanpa gambar, selain itu update pake gambar.

      Itu cuma permainan logika...
      Pahami aja cara kerja programnya secara perlahan... Anggap punya kaki, dan programny jalan dengan lambat

      Delete
  2. proses uploadnya kok gaada source codenya abg

    ReplyDelete
    Replies
    1. oh udah. waktu di upload gambarnya ga muncul ya. kosongan gitu

      Delete
    2. Coba cek url gambarnya, mungkin mungkin ada yang salah..

      Delete