ANCODER

Anime and Coding Daisuki

Tutorial Login & Register Full Chapter 1 ( Design Template )

Fahmi Amarullah 07.38 Tidak ada komentar
Domo minna, kali ini saya akan memposting kembali tutorial PHP yaitu Login Register System Full. Tutorial ini saya dapatkan dari phpacademy.org dan saya sangat berterima kasih sekali, hontou ni arigatou gozaimashita hehe kepada Alex Garrett selaku author dan pemilik website phpacademy.org karena saya berhasil mempelajari dan memahaminya. So thank you so much. Dan kali ini saya akan share kepada minna.

Saya katakan tutorial Login & Register Full karena disini bukan hanya membuat system login yang sederhana saja. Meskipun design web nya sederhana tetapi tutorial Login & Register ini juga meliputi : error handling, Disable-Ban User Account, total user widget, Registration and Validation, Protecting Pages, Email Activation dan masih banyak lagi pokonya minna hehe :D. Maka dari itu saya tidak akan membagi tutorial ini sekaligus tetapi dipecah menjadi beberapa chapter. Untuk seluruh source code bisa kalian ambil di menu download.

Pertama kita aktifkan localhost kita masing masing. Disini saya menggunakan xampp. Yang sangat mendasar sekali kita akan membuat database untuk project yang akan kita buat. Buka localhost/phpmyadmin anda di browser atau menggunakan Command Promt terserah anda. Kemudian buat database yang baru nama terserah masing-masing (disini saya membuat database bernama loginregister). Setelah membuat database, kita akan membuat table bernama users dengan column 7 seperti dibawah ini :

Kemudian klik tombol save.  Bisa di lihat pada colomn active, disitu default nya as defined dan value nya 0, colomn ini berfungsi untuk nanti kita aktivasi akun dengan email, jika nilai nya 0 maka akun belum di aktifkan lewat email dan jika nilai nya 1 akun sudah aktif dan bisa melakukan login. Setelah itu coba masukkan 1 record ke dalam table tersebut. Klik tombol insert dan lihat gambar dibawah ini :

Kemudian klik tombol Go. Dan record pun telah kita buat. Diatas pada bagian password pada bagian function kita gunakan md5 untuk menyembunyikan password asli kita jadi password nya tidak akan muncul dan akan diganti dengan karakter yang acak. Seperti ini hasilnya :


Bisa dilihat kolom password yg saya kotak hitamkan, nah itu lah fungsi dari md5 itu sendiri.
Yup database sudah kita buat, sekarang kita melangkah menuju design template web nya. Disini design template yang dibuat menggunakan html5 dan sangat sederhana, kalau mau dipercantik silahkan ulik sendiri ya :v .
Sekarang kita buat index.php dengan kode berikut :

<!doctype html>
<html>
<head>
<title>Ancoder Login Register</title>
<meta charset ="UTF-8">
<link rel="stylesheet" href="css/screen.css">
</head>
<body>
<header>
<h1 class="logo">Login Register System</h1>
<nav>
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="downloads.php">Downloads</a></li>
<li><a href="forum.php">Forum</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
</nav>
<div class="clear"></div>
</header>
<div id="container">
<aside>
<div class="widget">
<h2>Widget Header</h2>
<div class="inner">
Widget Contents
</div>
</div>
</aside>
<h1>Home</h1>
<p>Isi konten Home</p>
</div>
<footer>
&copy ANCODER 2015. All Right Reserved.
</footer>
</body>
</html>

Simpan file tersebut. Dan sekarang kita akan membuat file untuk design css nya. Buat file dengan nama style.css dan masukkan kode dibawah ini :

/* Resets */

ul {
 padding: 0 ;
 margin: 0 0 20px 0 ;
 list-style: none;
}

h1, h2, h3 {
 padding: 0;
 margin: 0 0 20px 0 ;
 font-weight: normal;
}

p {
 padding: 0 ;
 margin: 0 0 20px 0 ;
}

a:link, a:visited {
 text-decoration: underline;
 color: #000 ;
}

a:hover {
 text-decoration: none;
}

ul li {
 padding: 5px 0 ;
}

ul li input[type="text"], ul li input[type="password"] {
 width: 200px;
}

/* Header */

h1 {
 font-size: 1.8em ; 
}

h2, h3 {
 font-size: 1.4em ;
}

.logo {
 font: 2em Tahoma ;
 margin: 0 0 10px 0 ;
 padding: 0 ;
 width: 200px ;
 color: #fff ;
}

/* Container */

body {
 background: lightslategray ;
 font-family: Tahoma ;
 font-size: 0.8em ; 
}

#container, footer {
 background: #fff ;
 width: 920px ;
 margin: 0 auto ;
 padding: 20px; 
}

header {
 width: 940px ;
 padding: 20px;
 margin: 0 auto 10px auto ;
}

#container {
 min-height: 500px ;
 border-radius: 5px 5px 0 0;
}

footer {
 border-radius: 0 0 5px 5px ;
}

.widget {
 margin-bottom: 20px ;
}

.widget h3 {
 margin: 0 0 10px 0;
 padding: 0 5px ;
 font-weight: normal;
 border-bottom: 1px solid #ddd ;
}

.widget .inner {
 margin: 0 10px ;
}

/*Navigation*/

nav{
 float: left ;
}

nav ul {
 margin: 0;
}

nav ul li {
 display: inline;
 margin-right: 10px ;
}

nav ul li a {
 text-decoration: none;
}

nav ul li.current {
 font-weight: bold;
}

nav ul li a.last {
 border-right: 0 ;
}

/* Aside */

aside {
 width: 260px ;
 float: right;
 border-left: 1px dashed #aaa ;
 padding-left: 15px; 
}

/*Login */

#login li.link {
 margin-top: 5px;
}

/* Footer */

footer {
 border-top: 1px dashed #ddd ;
 color: #999;
}

/* Misc */

.clear {
 clear: both;
}
Save file tersebut. Dan kemudian coba kita running maka hasil nya seperti ini :

Nah selanjutnya adalah bagian yang paling membosankan hahaha. Sekarang kita akan memilah kode index diatas tadi dengan metode include supaya lebih praktis dan tidak terlalu banyak kode juga heheh. Tetapi sebelum itu kita akan membuat beberapa folder terlebih dahulu di dalam folder project kita. Pertama kita buat 3 folder yaitu : core, includes dan folder css. File css yang diatas tadi di save di folder css. Didalam folder includes buat folder overall dan widget. Baru sekarang kita buka file index.php tadi, kemudian cut bagian <head> sampai </head> kemudian buat file baru dan paste kan disana kemudian save di dalam folder includes dengan nama head.php. Selanjutnya masukkan kode ini di bagian file index yang telah di cut tadi :


<?php include 'includes/head.php' ; ?>
Jadi kode php di atas berfungsi untuk mamanggil file head.php yang berada didalam folder includes.
Kemudian selanjutnya cut bagian <header> sampai </header> dan buat file baru di dalam folder includes yaitu header.php dan selanjutnya masukkan kode pada bagian index.php yang barusan di cut :

<?php include 'includes/header.php' ;?>

Kemudian cut lagi file header.php pada bagian <nav> sampai </nav> paste kan di file baru menu.php, simpan di folder includes dan ganti hasil cut di header.php dengan kode include ini :

 <?php include 'includes/menu.php' ;?>
Lakukan hal yang sama pada bagian <aside> sampai </aside> dan <footer> sampai </footer>
Jadi hanya akan tersisa kode seperti ini :

<!DOCTYPE html>

<html>

 <?php include 'includes/head.php' ;?>

 <body>

 <?php include 'includes/header.php' ; ?>

 <div id="container">

  

  <?php include 'includes/aside.php' ; ?>



  <h1>Home</h1>

  <p>Isi konten Home</p>

 </div>

 <?php include 'includes/footer.php' ; ?>

</body>

</html>
Sudah selesai ? Belum tentunya hihi :v , lakukan hal yang sama kembali pada bagian <!DOCTYPE html> sampai bagian <?php include 'includes/aside.php' ; ?> kemudian buat file baru dengan nama header.php tetapi kali ini simpan di folder overall yang ada di dalam folder includes.
Kemudian buat kode php include lagi sesuai nama file dan foldernya. Lakukan hal yang sama pada bagian </div> sampai </html> sehingga pada index.php hanya tersisa kode dibawah ini :

<?php include 'includes/overall/header.php' ;?>

 <h1>Home</h1>

 <p>Isi konten Home</p>

<?php include 'includes/overall/footer.php' ;?>
Silahkan di running, jika tidak ada perubahan berarti tidak ada kesalahan tetapi jika berubah silahkan cek letak kesalahan nya.
Sekarang kita buat file baru yaitu register.php, kode nya sama dengan index.php

<?php include 'includes/overall/header.php' ;?>

 <h1>Register</h1>

 <p>Isi konten Register</p>

<?php include 'includes/overall/footer.php' ;?>
Save di dalam folder project kita.
Satu lagi tidak kalah penting nya, buka kembali file aside.php dan kita lakukan cutting lagi pada bagian <div class="widget"> sampai </div> dan kemudian paste di file baru dan edit menjadi seperti ini :







<div class="widget">



   <h2>Login / Register</h2>



   <div class="inner">



<form action="login.php" method="post">



       <ul id="login">



         <li>Username<br>



<input type="text" name="username">





</li>





         <li>Password<br>





<input type="password" name="password">





         </li>



         <li><input type="submit" value="Login"></li>



         <li>Belum Punya Akun ? <a href="register.php"><b>Register</b></a></li>



       </ul>          



     </form>



   </div>



</div>
dan save  dengan nama login.php tetapi simpan nya di folder widget karena ini akan menjadi login widget. Dan lakukan kode php include lagi di bagian aside.php yang sudah di cut tadi.

Jadi sekarang sudah tau kan kesimpulan nya kita tadi melakukan pekerjaan yang sangat membosankan dan mungkin minna sedikit kesal ya inilah fungsi nya :D, kita tidak perlu lagi cape-cape membuat halaman baru koding baru lagi membuat menu lagi ini lagi itu lagi, karena itulah kita cukup include saja hehehe :D.

Berikut hasil akhir nya :
 
Berhubung sudah malam jadi chapter 1 saya cukupkan sekian dulu. Jadi sampai jumpa di chapter selanjutnya.  Jika ingin mendownload pdf nya, silahkan di menu Download saja.
Sangkyuuuu ^_^ .

Tidak ada komentar :

Posting Komentar

Langganan: Posting Komentar ( Atom )

Staff Ancoder

DMCA Protected

DMCA.com Protection Status