Tutorial Proses Pengerjaan Tugas Akhir Pemrogaman Internet (Sosial Media) Tahap 4 (Persiapan, Login dan Registrasi)

Yupz jumpa lagi dengan saya.... Dicky Adventuree... hehe...
salam hangat buat kalian semua para pembaca yang telah menyempatkan untuk membaca tutorial pada tahap 4 ini :)

Tidak usah lama basa basinya yak :) hehe sekarang kita mulai saja :

Persiapan Awal Proyek

Setelah merancang dan membuat database beserta tabel-tabelnya, langkah berikutnya adalah mempersiapkan folder proyek, dengan tujuan agar file-file proyek dapat terorganisir dengan baik, karena biasanya sebuah proyek tersimpan dalam satu folder, kemudian di dalamnya dibuatkan lagi folder-folder untuk menyimpan file-file gambar, konfigurasi, CSS, Javascript dan lainnya. Untuk lebih jelasnya, susunan foldernya bisa dilihat pada gambar berikut :

Folder utama diberi nama jejaring, kemudian didalamnya terdapat enam folder, yaitu:

admin untuk menyimpan file-file skrip admin untuk mengelola konten situs.
css untuk menyimpan file style (CSS).
images untuk meyimpan file-file gambar.
include untuk menyimpan flie-file konfigurasi seperti file koneksi dan file fungsi yang digunakan oleh aplikasi
js untuk menyimpan file javascript atau jquery.
member untuk menyimpan data foro atau gambar setiap user berdasarkan user id (uid) masing-masing.

Login dan Registrasi

Sebuah situs jejaring sosial tentu memiliki halaman login dan registrasi untuk user yang ingin masuk ke dalam aplikasi atau ingin mendaftar menjadi member. Pada proyek ini kita akn membuat sebuah halaman login dan registrasi bergaya ala Facebook, walaupun facebook versi jadulnya hehe :)

Untuk membuatnya, kita memerlukan 5 buah skrip yang berkaitan dalam pemrosesan loginataupun registrasi, yaitu : db.php, index.php, login.js, proses_daftar.php dan login.css

Sebelum memulai membuat login dan registrasi, letakkanlah file jquery.1.4.2.min.js ke dalam folder js, karena kita akan butuh jquery dalam pemrosesan data pendaftaran. Mari kita bahas satu persatu skripnya.

Skrip db.php

Skip db.php adlaah file untuk mengkoneksikan database yang telah kita buat sebelumnya dan karena nama 'dickyadventuree' agak rempong ngafalinnya di sini saya ganti namanya menjadi (jejaringq) hehe :v , dengan aplikasi php yang akan kira buat nanti. Simpan dan ltakkan file db.php di dalam folder include.
Skrip index.php

Selanjutnya letakkan file index.php itu ke dalam folder utama, yaitu jejaring. Skrip ini merupakan tampilan utama halaman login dan registrasi yang kita akan buat bergaya seperti Facebook.

Pada bagian head dari skrip, mengimport bebrapa file, seperti login.css pada folder css, jquery.1.4.2.min.js pada folder js.

File login.css style dari halaman index yang membuat halaman index berpenampilan ala Facebook. File login.css yang terdapat di folder css dapat didownload di link di atas.

Pemrosesan terbagi menjadi dua, yang pertama ketika user login dan yang kedua proses ketika user mendaftarkan diri. Ketika user login, maka pada skrip ini sudah melakukan validasi apakah user dan password sudah benar, jika benar maka akan diarahkan ke halaman home.php. Dan Ketika user mendaftarkan diri, maka pemrosesan akan berhubungan dengan skrip proses_daftar.php dan login.js.

Sebelum membuat file tersebut, yaitu login.hs dan proses_daftar, kita bisa melihat dulu hasil tampilan di halaman utama di browser dengan mengetikkan http://localhost/jejaring/, maka hasilnya akan terlihat seperti pada gambar di bawah ini :

Skrip Login.js

Berguna untuk pemrosesan pendaftaran user. Skrip ini menggunakan fungsi serialize untuk menyederhanakan proses pemanggilan variabel pada jquery.Skrip ini memiliki tiga buah fungsi yang dijalankan di jquery, yaitu :

Register yang berfungsi untuk menjembatani ke file skrip proses_daftar.php jika berhasil dan jika tidak berhasil akan menampilkan pesan pada halaman index.

--Fungsi hideshow digunakan untuk mengatur apakah pesan ditampilkan atau tidak ditampilkan pada index.php

--Fungsi error digunakan untuk memberikan pesan error.

--Dan yang terakhir adalah fungsi sukses yang digunakan untuk memberikan pesan sukses.

Skrip proses_daftar.php

Berfungsi untuk mengatur pemrosesan pendaftaran user, termasuk penyimpanan data user dan validasi apakah field pendagtaran sudah di-isi lengkap beserta teks pesan yang akan ditampilkan di halaman utama (index.php).

Pesan validasi data akan dikirimkan atau diparsing ke login.js lewat JSON (JavaScript Object Notation) dan ditampilkan di halaman utama (index.php).

Jika pendaftaran berhasil disimpan, maka akan terbentuk folder uid di dalam folder member dan folder foto di dalam folder uid. Folder uid adalah tempat yang digunakan untuk menyimpan foto profil, sedangkan folder foto akan digunakan nanti dalam penyimpanan gambar atau foto galeri.

Pada halaman utama, pada bagian kanan ada form perndaftaran, silahkan isi datanya, lalu klik tombol Sign Up, apabila berhasil maka akan tampil pesan di bagian bawah form pendaftaran. Lihat gambar di bawah :

Untuk mencoba validasi, silahkan kosongkan semua atau sebagian isian, lalu klik tombol Sign Up, maka akan tampil peringatan. Contohnya bisa dilihat di gambar bawah ini :