Membangun Aplikasi Perpustakaan Berbasis Web Menggunakan PHP 7 dan MySQLi - NesiaNet

25 Agustus 2022
Masih dalam tahap penyusunan oleh Pendiri NesiaNet
Dibantu oleh Pendiri NesiaNet

Membangun Aplikasi Perpustakaan Berbasis Web Menggunakan PHP MySQLi Versi 7 langkah demi langkah dari awal sampai jadi dan teruji.

  • Download dan Instal software-software aplikasi berikut (untuk linknya silahkan request via komentar di bawah)
    • Download dan Instal XAMPP versi 7.3.0 (jangan instal XAMPP di Program Files, alternatifnya silahkan instal di C:/Xampp atau D:/Xampp, atau drive lainnya.),
      • Akan muncul permintaan izin windows defender/firewall, silahkan iya-kan untuk koneksi Public (centang public network)
    • Download dan Instal Notepad++ v8.4.4
    • Download dan Instal Chrome Beta versi 105.x.x
  • Jika XAMPP telah terinstal, anda bisa menguninstalnya terlebih dahulu jika memang ingin mengingat/mengulang cara menginstal XAMPP
    • Cara uninstal aplikasi di Windows dengan cara
    • Klik tombol start
    • Ketik Apps atau ketik Add or remove programs
    • Klik pada ikon Add or remove programs
    • Scroll atau cari (ketik) xampp
    • Klik pada options (tiga titik)
    • Pilih uninstall > uninstall > yes
    • yes > untuk pertanyaan apakah anda ingin membongkar xampp dan seluruh komponennya?
    • yes > untuk hapus folder htdocs juga?
    • Tunggu sampe uninstall compelete lalu OK

Apa itu XAMPP, PHP, MySQL, dan Chrome?
  • XAMPP adalah paket aplikasi berisi simulasi server (menjadikan localhost atau laptop menjadi server lokal/offline sehingga dapat menjalankan website, mengupload file ke website tersebut dan lain sebagainya), XAMPP berisi Apache server (aplikasi inti untuk mengaktifkan server localhost), PhpMyAdmin (untuk mengelola aplikasi web atau situs web berbasis php), FileZilla (untuk mengunggah file-file elemen situs ke dalam web), dsb.
  • Php adalah salah satu bahasa pemrograman, versi yang kita gunakan adalah versi 7, versi di sini berarti aturan penulisan php versi 7 sedikit berbeda dengan aturan/syntax/daftar perintah pada versi 5 dan versi yang lain.
  • MySQLi adalah versi baru dari MySQL, MySQL merupakan tipe basis data (database) yang banyak digunakan untuk meyimpan data website/aplikasi atau data pengguna (user), ekstensi/format filenya adalah .sql
  • Notepad++ adalah aplikasi untuk mengedit teks digunakan untuk membangun atau mengedit elemen program karena pada dasarnya semua bahasa pemrograman menggunakan keyboard/ketikan/huruf angka dan simbol (teks)
  • Chrome atau Google Chrome adalah web browser (penampil halaman web), beberapa ekstensi yang dapat ditampilkan pada chrome diantaranya html, htm, xml, php, txt, css, js, png, jpg, gif, webp, mp3, mp4, m4a, pdf, dan lain sebagainya.

Cara Menjalankan XAMPP Control Panel
  • Klik Start
  • Ketik XAMPP
  • Klik pada ikon XAMPP

Mengaktifkan Apache dan MySQL
  • Klik Start pada fitur-fitur yang ingin diaktifkan tersebut di atas
    • Baca: cara mengatasi apache atau mysql not running
  • Allow/centang pada Public Networks untuk pertanyaan izin akses di Popup Windows Firewall yang muncul

Jalankan phpMyAdmin
  • Buka Chrome
  • Ketikkan IP Address 127.0.0.1 atau Domain localhost pada URL Bar
  • Enter
  • Klik menu phpMyAdmin pada bagian kanan atas tampilan aplikasi web XAMPP Apache (localhost)

Membuat Database SQL
  • Klik New pada bagian kir
  • Masukan nama database yang anda inginkan pada bagian Create Database Name
    • Misalkan kita beri nama "perpustakaan" (tanpa tanda petik)
  • Untuk tipe teksnya biarkan default latin1_swedish_ci
  • Klik Create

Membuat Tabel Pertama Database SQL
  • identitas
    • nama: identitas
    • jumlah kolom: 6
    • Create/ go

Membuat Kolom Database SQL
  • Saat anda klik go di atas, maka akan muncul 6 kolom kosong, langsung isi nama satu-persatu sebagai berikut:
    • id_identitas
    • nama_aplikasi
    • email
    • tlp
    • alamat
    • denda
Menghapus Kolom/Tabel
  • Klik pada nama tabel
  • Pilih Operations
  • Scroll sampai bawah
  • Klik Delete Table

Mengedit/Menyesuaikan Kolom Database
  • Klik nama database pada sidebar kiri phpMyAdmin (perpustakaan)
  • Klik tanda plus + pada nama database perpustakaan
  • Klik tanda plus + pada nama tabel identitas
  • Klik tanda plus + pada Columns
  • Klik pada kolom yang akan diedit
  • Lalu sesuaikan pengaturan kolom sesuai dengan tipe data isiannya nanti, seperti berikut:
  • Kolom id_identitas
    • Name: id_identitas
    • Type: INT (tipe karakter yang dapat diketikkan nantinya, integer=bilangan/angka)
    • Length: 5 (maksimal huruf/karakter yang dapat diketikkan nantinya)
    • Default: none
    • A_I: jangan centang dulu
  • Kolom nama_aplikasi
    • Name: nama_aplikasi
    • Type:VARCHAR
    • Length: 100
    • Default: none
    • A_I: jangan centang
  • Kolom email
    • Name: email
    • Type:VARCHAR
    • Length: 50
    • Default: none
    • A_I: jangan centang
  • Kolom tlp
    • Name: tlp
    • Type:VARCHAR
    • Length: 50
    • Default: none
    • A_I: jangan centang
  • Kolom alamat
    • Name: alamat
    • Type: Text
    • Length/values: biarkan kosong
    • Default: none
    • Collation: biarkan default/latin1_swedish_ci
    • Attributes: biarkan kosong
    • Null: jangan centang
    • A_I: jangan centang
    • Comments: isi dengan catatan atau pengingat atau keterangan, bisa juga dikosongkan
    • Klik Save
  • Kolom denda
    • Name: denda
    • Type:VARCHAR
    • Length: 10
    • Default: none
    • A_I: jangan centang

Menentukan Kolom Mana yang Berperan Sebagai Primary Key
  • Primary Key (PK) adalah pembeda dari suatu data, misal penduduk dibedakan dengan NIK/Nomor KTP, sehingga walaupun ada lebih dari satu orang dengan nama yang sama, aplikasi komputer dapat memproses dan membedakan tiap-tiap data individu, contoh lainnya adalah nomor absen, nomor antrian, dan lain sebagainya.
  • Pada tabel identitas ini, kolom id_identitas yang akan menjadi primary key, caranya
  • Klik Columns yang ada di tabel identitas
    • Pada menu indexes
    • Ketik 1 pada Create an index on 1 columns lalu
    • Go
    • Index name isi PRIMARY (terserah anda)
    • Index Choice pilih PRIMARY
      • Advanced options:
        • Index type: BTREE
      • Column: id_identitas
        • Size: kosongkan
    • Klik judul popup "Add index", tahan dan drag/geser agak atas agar tombol go tidak tertutup
    • Klik Go
    • Sekarang indexes sudah muncul disidebar phpMyAdmin

Mengaktifkan Auto Increment
  • Pada PRIMARY key yang kita buat dengan cara
  • klik id_identitas pada sidebar Columns
  • centang A_I
  • Save

Kita Sukses Membuat Tabel Pertama dengan 6 Kolom (1 Kolom Primary Key + 5 Kolom Data Biasa), sekarang


Cara Mengekspor Database
  • Klik nama database perpustakaan pada sidebar kiri phpMyAdmin
  • klik menu Export pada bagian tengah atas
  • format: SQL (.sql)
  • klikGo
  • tunggu
  • simpan file SQL di harddisk, beri nama perpustakaan.sql
    • lokasinya: buka lokasi xampp terinstal, yaitu
      • D:/xampp
    • buka folder htdocs
      • d:/xampp/htdocs
    • buat folder perpustakaan
      • d:/xampp/htdocs/perpustakaan
    • buat folder database
      • d:/xampp/htdocs/perpustakaan/database
    • simpan di lokasi tersebut
      • d:/xampp/htdocs/perpustakaan/database/perpustakaan.sql
  • save

Berikut Struktur dari Database SQL yang Kita Buat Sejauh Ini (Sampai Progress di Atas):
  • Database perpustakaan.sql
    • Table identitas
      • Columns
        • id_identitas (int, 5, A_I)
        • nama_aplikasi (varchar, 100)
        • email (varchar, 50)
        • tlp (varchar, 50)
        • alamat (text)
        • denda (varchar, 10)
      • Indexes
        • PRIMARY
          • id_identitas (BTREE)

LATIHAN

Sekarang, silahkan buat tabel sisanya dengan struktur lengkap sebagai berikut:

Database perpustakaan.sql
  • Table identitas
    • Columns
      • id_identitas (int, 5, A_I)
      • nama_aplikasi (varchar, 100)
      • email (varchar, 50)
      • tlp (varchar, 50)
      • alamat (text)
      • denda (varchar, 10)
    • Indexes
      • PRIMARY
        • id_identitas (BTREE)
  • katalogbuku
    • Columns
      • id
      • isbn
      • judul
      • jumlah_buku
      • jum_temp
      • kd_kategori
      • kd_penerbit
      • pengarang
      • rak_buku
      • tgl_masuk
      • th_terbit
  • kategori
  • penerbit
  • siswa
  • transaksi
  • user
⬅️ 🏠 Awal ☰ Menu/Daftar Isi ➡️