TUTORIAL MEMBUAT FORM LOGIN MENGGUNAKAN PHP dan MYSQLi

TUTORIAL MEMBUAT FORM LOGIN MENGGUNAKAN PHP dan MYSQLi

Assalamu’alaikum Wr.Wb

Pengertian atau Apa itu PHP dan MYSQLi?
            PHP atau Hypertext Preprocessor, adalah bahasa pemrograman yang biasa di gunakan untuk pengembangan Website. Dulunya pada tahun 1995, PHP merupakan singkatan dari Personal Home Page yang dikembangkan oleh Rasmus Lerdorf sesuai namanya PHP digunakan untuk membuat website pribadi. Seiring berjalannya waktu bahasa pemrograman PHP mulai banyak di kenal dan digunakan oleh kalangan sendiri maupun perusahaan. PHP adalah bahasa pemrograman yang berifat Open Source(Bebas).
            MYSQLi adalah Database Management System (DBMS) yang menghubungkan bahasa pemrograman anda dengan database. MYSQLi adalah kembangan dari MYSQL, penambahan kata “i” dalam MYSQLi di artikan Improved(disempurnakan).

Persiapan
Tools yang harus kita siapkan sebelum membuat aplikasi CRUD sederhana berbasis website :
-          Code Editor (saya menggunakan Visual Code)
-          Virtual Server (saya menggunakan XAMPP)
-          Web Browser (saya menggunakan Firefox developer edition)
Kalian bisa menggunakan tools yang biasa digunakan, tapi usahakan sama yaa... Agar kalian mudah mengikutinya, dan jika belum punya toolsnya silahkan di download terlebih dahulu 
:-D

Kita Mulai Yuk....
1.      Buka Virtual Server(XAMPP) kalian.
Pada aplikasi XAMPPnya nyalakan/Start modul Apache dan MySQL seperti yang ada di dalam kotak merah pada gambar di atas, tunggu hingga muncul angka pada port Apache dan MySQL nya.

2.      Buka folder XAMPP di File Exploler dan masuk ke folder htdocs, jika kamu meginstall XAMPP secara default(tidak memindah directory installation) biasanya berada di : Local Disk (C:)/xampp/htdocs. Seperti gambar dibawah ini.

3.      Buat Folder baru dan beri nama sesuai yang kamu inginkan(Tidak boleh ada penggunaan spasi). Folder ini berisi file-file php kita nantinya.
Disini foldernya saya beri nama "latihan-login" . Untuk menghindari penggunaan spasi, saya ganti dengan tanda minus(-).

4.      Setelah semua langkah diatas selesai silahkan buka text editor kalian. Disini saya akan menggunakan Visual Code, kalian boleh memakai text editor yang biasa kalian gunakan atau yang kalian sukai.
Saya sarankan kalian menggunakan Visual Code, kalian nantinya akan mudah mengikuti .

5.      Langkah selanjutnya silahkan pilih dan buka folder yang sudah kalian buat tadi seperti gambar dibawah.
Tampilan setelah dibuka seperti pada gambar di bawah :

6.      Jika langkah diatas sudah semua silahkan kalian buka web browser kalian dan ketikkan alamat ini “ http://localhost/phpmyadmin/ ” 
Diatas adalah tampilan localhost dari virtual servernya(XAMPP) dan klik “New” yang ada pada menu. Fungsi menu New untuk membuat database untuk project baru.

7.      Setelah masuk menu New akan muncul tampilan seperti dibawah ini.
Masukkan nama database yang akan kalian buat pada kolom “Database Name” yang ada pada gambar diatas dan klik "Create". Nama database ini juga tidak boleh menggunakan spasi.

8.      Sesudah membuat database akan muncul tampilan perintah seperti ini untuk membuat tabel.
Berikan nama tabel dengan nama “admin” dan dengan jumlah kolom “3” lalu klik “Go”.

9.      Massukkan isi dari tabel admin seperti berikut: 
Untuk id pilih type int(integer), pilih primary key dan centang AI(auto_increment).

Untuk username dan password pilih type varchar dan masukkan Values 255.
Klik tombol save jika sudah selesai.

10.      Selanjutnya jika sudah seperti dibawah :
Klik submenu “Insert” untuk memasukkan data kedalam tabel admin. Lalu masukkan data seperti dibawah :
“id” biarkan kosong karena memiliki nilai AI(auto_increment) atau otomatis.
“username” dan “password” isikan admin. Klik “Go”.
Jika data sudah masuk kedalam tabel akan muncul data seperti ini :

11.      Jika kalian sudah mengikuti langkah diatas, sekarang kita kembali ke kode editor.
Selanjutnya kita akan membuat koneksi. Buatlah file dengan nama “koneksi.php”, gambar dibawah ini ada kotak merah yang saya beri, silahkan klik pada bagian gambar itu untuk membuat file baru.
Masukkan kode seperti gambar diatas. Sesuaikan nama databasenya, disini saya menggunakan database “latihan login”. Horee.... :-D

12.      Setelah membuat koneksi, sekarang kita akan membuat tampilan awal login kita.
Buatlah file baru dengan nama “index.php” dan massukkan kode seperti di bawah ini, dan buat lah struktur file seperti pada kotak merah yang ada pada gambar di atas.
13.      Sekarang kita akan membuat file yang menyambung kan antara tampilan awal dengan dashboard admin sekaligus untuk mengecek apakah user sudah login.
Buatlah file baru lagi dengan nama “cek.php” dan masukkan kode seperti di bawah:

14.      Sudah mengikuti semua yang ada di atas? nah sekarang kita akan membuat tampilan admin jika sudah login, massukkan kode pada seperti pada gambar dibawah ini, lokasi kodenya di file “admin/index.php”
15.      Nah sekarang kita akan membuat fungsi untuk logout dan kembali ke halaman awal login. Massukkan kode seperti gambar dibawah, lokasi kodenya di file “admin/logout.php”


Nah kita sekarang sudah belajar untuk membuat aplikasi login sederhana menggunakan PHP dan mysqli, berikut tampilan jika sudah jadi

Sekian dari saya, Wassalamu’alaikum Wr.Wb
Penulis : 
Muhammad Rizkita Fandy (SMK PLUS DARUS SALAM KEDIRI)
Angkatan ke-17



Tidak ada komentar :

Posting Komentar