Membuat Jejaring Sosial Sederhana dengan PHP, MYSQL, Bootstrap di Localhost (part 1)

Selamat datang sobat,

Bagaimana kabarnya, semoga baik-baik saja. Sobat mempunyai waktu luang, dari pada nganggur mending belajar aja yuk!!

Hari ini saya akan membagikan “tutorial cara membuat jejaring sosial sederhana php dan mysql dengan bootstrap (membuat database untuk proses daftar user dan login)”. Saya juga dulu pernah belajar membuat ini, yaitu dari “TUTORIAL JACO”, jadi saya di sini Cuma ingin membagikan ilmu saya, agar sobat juga paham. kita akan membuat seperti tampilan di bawah ini.

simak baik-baik ya....

Tutorial ini akan membahas langkah-langkah dalam membangun sebuah website jejaring sosial atau

sosial media seperti Facebook, Twitter. Fungsi dasar dari sebuah jejaring sosial antara lain

Pendaftaran User, Login, Logout, Foto profil, Update Status/ Gambar/ Video, Halaman Profil,

Unggah Lokasi, Berbagi buku/musik/hobi favorit,Kirim pesan,Forum diskusi,Tambah teman,

Notifikasi, Galeri, dan Masih banyak lagi. Fitur-fitur tersebut sebenarnya dapat kira buat dengan

menggunakan modal dasar Bootstrap, Php dan database Mysql.Karena langkah dalam membangun

sebuah jejaring sosial ini sangat banyak. Maka akan dibagi menjadi beberapa tahap. Oke, kita

langsung saja ke tahap pertama yaitu membuat database untuk proses daftar user dan login.

1. Siapkan alat dan bahannya

· Aplikasi localhost, xampp, ampps (disarankan). Wamp dll. software yang di pakai apa saja bisa mengikuti tutorial ini. mungkin ada sedikit perbedaan.

· Buatlah sebuah folder project di Localhost anda (\program files\ampss\www\world-info)

· Download bootstrap disini, ekstrak, lalu copy pastekan ke dalam folder project yang sobat buat tadi.

memindahkan bootstrap

· Buatlah database Mysql dengan nama (world-info) dan sebuah table dengan nama(user).

membuat database "world-info"

membuat table "user"

· Setelah selesai membuat database sekarang tinggal membuat atribut structure seperti ini.

tampilan atribut

Caranya copy pastekan kode SQL dibawah ini, ke dalam table (user) yang sudah di buat tadi :

CREATE TABLE `user` (

`id_user` int(11) NOT NULL AUTO_INCREMENT,

`nama_depan` varchar(30) CHARACTER SET utf8 DEFAULT NULL,

`nama_belakang` varchar(30) CHARACTER SET utf8 DEFAULT NULL,

`email` varchar(50) CHARACTER SET utf8 DEFAULT NULL,

`password` varchar(50) CHARACTER SET utf8 DEFAULT NULL,

`kelamin` varchar(30) CHARACTER SET utf8 DEFAULT NULL,

`tgl_lahir` varchar(20) DEFAULT NULL,

`agama` varchar(30) CHARACTER SET utf8 DEFAULT NULL,

`foto_profil` varchar(100) DEFAULT NULL,

`status` varchar(30) DEFAULT NULL,

`alamat` varchar(100) DEFAULT NULL,

`hobi` varchar(50) DEFAULT NULL,

`level` varchar(50) DEFAULT NULL,

`aktif` char(1) DEFAULT 'Y',

`profil_singkat` text,

PRIMARY KEY (`id_user`)

) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=latin1

2. Jika semua bahan pada tahap 1 diatas sudah komplit, maka kita sudah bisa memulai untuk proses coding web nya. Fungsi yang akan kita buat adalah Pendaftaran Akun User dan Login. Pertama buatlah sebuah project php.

Simpan dengan nama index.php ke dalam folder project localhost yang sudah di buat tadi.

<html>

<head>

<title>Selamat Datang</title>

</head>

<body>

</body>

</html>

3. Selanjutya, Edit file index.php tadi. Tambahkan tautan untuk menggunakan file css dan javascript bootstrap dan juga jquery.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Untitled Document</title>

src="http://code.jquery.com/jquery.min.js"></script>

</head>

<body>

</body>

</html>

4. Sekarang framework bootstrap sudah siap digunakan.sekrang saatnya membuat fungsi-fungsi yang

dibutuhkan oleh index.php. Kita buat file php baru dan beri nama library.php. library.php ini akan berisi function-function yang akan ditampilkan dan digunakan pada halaman index.php.

Kode syntak library.php

<?php

function navbarindex(){

<span class="sr-only">Toggle navigation</span>

</button>

<a class="navbar-brand" href="index.php">WORLD-INFO</span></a>

</div>

<li><a href="#myModal" data-toggle="modal"><span class="glyphicon glyphicon-log-in"></span> Login </a></li>

</ul>

</div>

</nav>

<?php

}

function modallogin(){

<h4 class="modal-title">Login Disini</h4>

</div>

<p>Masukkan Email dan Password Anda dengan Benar</p>

<label for="inputEmail">Email</label>

</div>

<label for="inputPassword">Password</label>

</div>

<button type="submit" class="btn btn-primary">Login</button>

<button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>

</form>

</div>

<p class="text-warning"><small><center>Jangan Pernah Memberitahukan Email dan Password Anda pada Orang Lain.</center></small></p>

</div>

</div>

<?php

}

function register(){

<hr>

<h2> DAFTAR DISINI</h2>

<label for="namadepan"> Nama Depan : </label>

</div>

<label for="namabelakang"> Nama Belakang : </label>

</div>

<label for="inputemail"> Email : </label>

</div>

<label for="inputpassword"> Password : </label>

</div>

<label for="inputjk"> Jenis Kelamin : </label>

<option value="Pria" class="form-control">Pria

<option value="Wanita" class="form-control">Wanita

</select>

</div>

<label for="inputtanggal"> Tanggal Lahir : </label>

</div>

<button type="submit" class="btn btn-primary" value="DAFTAR" onclick="return confirm('Apakah Anda yakin akan daftar?')" name="kirim">DAFTAR</button> </center>

</div>

</form>

<?php

}

function footer(){

<hr>

</div>

<?php

}

function koneksi_db(){

$host = "localhost";

$database = "world-info";//sesuaikan nama db kamu

$user = "root";//sesuaikan usernya, kalau di cpanel usernya ganti juga, biasanya nama user akun cpanel

$password="";// sesuaikan password kamu, kalau di cpanel ganti juga, biasanya password akun cpanel

$link = mysql_connect($host,$user,$password);//koneksi ke db

mysql_select_db($database,$link);//pilih nama db

if(!$link)

echo "Error : ".mysql_error();

return $link;

}

Fungsi Function diatas antara lain :

a. Fungsi koneksi database

b. Fungsi form registrasi

c. Fungsi Modal Login.

d. Fungsi Navbar index

e. Fungsi Footer.

Manfaat ketika menggunakan Function misalnya jika kita ingin mengganti isi dari Footer sebuah halaman web, kita tidak perlu repot-repot mengganti footer pada semua halaman web, kita cukup mengganti isi function footer pada library.php.

NB : jika ada error, di periksa syntak kode library.php-nya. Yang teliti ya sobat.

5. Kemudian edit index.php. Kita panggil function yg sudah kita buat menggunakan syntax 'Include' seperti

berikut :

<?php

include ("library.php");

Pasang syntax ini pada bagian atas index.php dan panggil function yang ada pada library.php dengan syntax berikut :

Lebih lengkapnya syntak ini sobat copy ke dalam index.php, dan ganti kode index.php dengan kode ini.

<?php

include ("library.php");

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Selamat Datang</title>

src="http://code.jquery.com/jquery.min.js"></script>

</head>

<body>

<?php

navbarindex(); //memanggil function navbar

modallogin(); //memanggil function modal login

<h2>WORLD-INFO</h2>

</div>

<?php

footer(); // memanggil footer dari web

</div>

</body>

</html>

6. Save file index.php dan coba buka project yang dibuat pada localhost

Contoh : localhost/world-info(nama project sobat) di browser sobat

jika ada notif error, tanya saja dan tulis di kotak komentar. Jika lancar-lancar aja, maka tampilannya akan

seperti ini.

tampilan index.php

NB : untuk syntak kode index.php silahkan bisa sobat edit

Langkah untuk proses login dan register akan dibahas pada tutorial part 2 karena panjang. Jadi saya membagikan tutorial ini secara part-part-an.

Pada part 2 akan dibahas tentang SESSION login, proses Simpan pendaftaran akun ke database, Logout, validasi isi Form registrasi, Login gagal dan Login sukses menuju home.

Semoga sobat tetap menunggu update-tannya ya? Semoga tutorial ini bermanfaat buat sobat.

maaf jika paragraf masih acak-acakan....

Terima Kasih atas kerja kerasnya

Sampai Jumpa pada tutorial selanjutnya :)

WORLD-INFO

Membuat Jejaring Sosial Sederhana dengan PHP, MYSQL, Bootstrap di Localhost (part 1)

No comments:

Post a Comment

Popular Post

Blog Stats

Blog Archive

Label

About Me

Followers