Jumat, 31 Juli 2015

Membuat Sistem Login dan Signup Dengan Mysql, PHP, Jquery dan CSS

hai gan! kali ini saya akan memberikan sebuah tutorial untuk membuat sistem login, logout, dan signup pada web anda. menggunakan PHP, MYsql, jquery dan css. Langsung aja ya. sebenarnya pemrogramman ini gampang, kita hanya membutuhkan logika untuk membuatnya. Karena jika ingin berbuat sesuatu kita membutuhkan logika.
1. MYSQL
ini dia MYSQL nya bro.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
--
-- Table structure for table `dh_members`
--
 
CREATE TABLE `dh_members` (
  `id` int(11) NOT NULL auto_increment,
  `usr` varchar(32) collate utf8_unicode_ci NOT NULL default '',
  `pass` varchar(32) collate utf8_unicode_ci NOT NULL default '',
  `email` varchar(255) collate utf8_unicode_ci NOT NULL default '',
  `regIP` varchar(15) collate utf8_unicode_ci NOT NULL default '',
  `dt` datetime NOT NULL default '0000-00-00 00:00:00',
  PRIMARY KEY  (`id`),
  UNIQUE KEY `usr` (`usr`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

itu simpel banget, diimport aja ke phpmyadminnya.

2. Slider Tab
kita taro di file demo.php aja ya langsung.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<div id="toppanel">
   
  <div id="panel">
     
    <div class="content clearfix">
       
      <div class="left">
         
        <h1>The Sliding jQuery Panel</h1>
         
        <h2>A register/login solution</h2>
         
        <p class="grey">You are free to use this login and registration system in you sites!</p>
         
        <h2>A Big Thanks</h2>
         
        <p class="grey">This tutorial was built on Jagocoding.com</p>
      </div>
      <!--?php
      if(!$_SESSION['id']):
      // If you are not logged in
      ?-->
       
      <div class="left"><!-- Login Form --><form class="clearfix" action="" method="post">
         
        <h1>Member Login</h1>
        <!--?php
        if($_SESSION['msg']['login-err'])
        {
        echo '
         
        <div class="err"-->'.$_SESSION['msg']['login-err'].'</form></div>
      '; unset($_SESSION['msg']['login-err']); // This will output login errors, if any } ?&gt; <label class="grey" for="username">Username:</label> <input id="username" class="field" type="text" name="username" value="" size="23" /> <label class="grey" for="password">Password:</label> <input id="password" class="field" type="password" name="password" size="23" /> <label><input id="rememberMe" type="checkbox" name="rememberMe" value="1" checked="checked" /> &nbsp;Remember me</label>
       
      <div class="clear">&nbsp;</div>
      <input class="bt_login" type="submit" name="submit" value="Login" /></div>
     
    <div class="left right"><!-- Register Form --><form action="" method="post">
       
      <h1>Not a member yet? Sign Up!</h1>
      <!--?php
       
      if($_SESSION['msg']['reg-err'])
      {
      echo '
       
      <div class="err"-->'.$_SESSION['msg']['reg-err'].'</form></div>
    '; unset($_SESSION['msg']['reg-err']); // This will output the registration errors, if any } if($_SESSION['msg']['reg-success']) { echo '
     
    <div class="success">'.$_SESSION['msg']['reg-success'].'</div>
    '; unset($_SESSION['msg']['reg-success']); // This will output the registration success message } ?&gt; <label class="grey" for="username">Username:</label> <input id="username" class="field" type="text" name="username" value="" size="23" /> <label class="grey" for="email">Email:</label> <input id="email" class="field" type="text" name="email" size="23" /> <label>A password will be e-mailed to you.</label> <input class="bt_register" type="submit" name="submit" value="Register" /></div>
  <!--?php
  else:
  // If you are logged in
  ?-->
   
  <div class="left">
     
    <h1>Members panel</h1>
     
    <p>You can put member-only data here</p>
    <a href="registered.php">View a special member page</a>
     
    <p>- or -</p>
    <a href="?logoff">Log off</a></div>
   
  <div class="left right">&nbsp;</div>
  <!--?php
  endif;
  // Closing the IF-ELSE construct
  ?--></div>
 
<p>&nbsp;</p>
 
<div class="tab">
   
  <ul class="login">
    <li class="left">&nbsp;</li>
    <li>Hello <!--?php echo $_SESSION['usr'] ? $_SESSION['usr'] : 'Guest';?-->!</li>
    <li class="sep">|</li>
    <li id="toggle"><a id="close" class="close" style="display: none;" href="#">Close Panel</a></li>
    <li class="right">&nbsp;</li>
  </ul>
</div>

itu tadi buat jadi slider tabnya. kaya yang di web-kreation.com. Fungsi $_SESSION['usr'] apa bro? fungsinya untuk mengambil data sang visitor, contohnya fullname, username dsb. sementara SESSION['id'] berfungsi untuk membatasi daerah kekuasaan yang logged in dan yang tidak ter logged in

3. Otak dari Programming demo.php
Ini dia otak inti dari programming kita tadi.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
define('INCLUDE_CHECK',true);
 
require 'connect.php';
require 'functions.php';
 
// Those two files can be included only if INCLUDE_CHECK is defined
 
session_name('dhLogin');
// Starting the session
 
session_set_cookie_params(2*7*24*60*60);
// Making the cookie live for 2 weeks
 
session_start();
 
if($_SESSION['id'] && !isset($_COOKIE['dhRemember']) && !$_SESSION['rememberMe'])
{
    // If you are logged in, but you don't have the dhRemember cookie (browser restart)
    // and you have not checked the rememberMe checkbox:
 
    $_SESSION = array();
    session_destroy();
 
    // Destroy the session
}
 
if(isset($_GET['logoff']))
{
    $_SESSION = array();
    session_destroy();
    header("Location: demo.php");
    exit;
}
 
if($_POST['submit']=='Login')
{
    // Checking whether the Login form has been submitted
 
    $err = array();
    // Will hold our errors
 
    if(!$_POST['username'] || !$_POST['password'])
        $err[] = 'All the fields must be filled in!';
 
    if(!count($err))
    {
        $_POST['username'] = mysql_real_escape_string($_POST['username']);
        $_POST['password'] = mysql_real_escape_string($_POST['password']);
        $_POST['rememberMe'] = (int)$_POST['rememberMe'];
 
        // Escaping all input data
 
        $row = mysql_fetch_assoc(mysql_query("SELECT id,usr FROM dh_members WHERE usr='{$_POST['username']}' AND pass='".md5($_POST['password'])."'"));
 
        if($row['usr'])
        {
            // If everything is OK login
 
            $_SESSION['usr']=$row['usr'];
            $_SESSION['id'] = $row['id'];
            $_SESSION['rememberMe'] = $_POST['rememberMe'];
 
            // Store some data in the session
 
            setcookie('dhRemember',$_POST['rememberMe']);
            // We create the dhRemember cookie
        }
        else $err[]='Wrong username and/or password!';
    }
 
    if($err)
        $_SESSION['msg']['login-err'] = implode('<br />',$err);
        // Save the error messages in the session
 
    header("Location: demo.php");
    exit;
}

Saya sudah membuat kode itu semudah yang saya bisa agar anda dapat mengerti isi dari kode tersebut. fungsi dari dhRemember adalah agar setiap orang yang tidak mencentang pada Remember Me akan terhapus datanya pada auto fill form setelah mereka logout.

Otak Kedua dari demo.php ini adalah
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
else if($_POST['submit']=='Register')
{
    // If the Register form has been submitted
    $err = array();
 
    if(strlen($_POST['username'])<4 || strlen($_POST['username'])>32)
    {
        $err[]='Your username must be between 3 and 32 characters!';
    }
 
    if(preg_match('/[^a-z0-9\-\_\.]+/i',$_POST['username']))
    {
        $err[]='Your username contains invalid characters!';
    }
 
    if(!checkEmail($_POST['email']))
    {
        $err[]='Your email is not valid!';
    }
 
    if(!count($err))
    {
        // If there are no errors
        $pass = substr(md5($_SERVER['REMOTE_ADDR'].microtime().rand(1,100000)),0,6);
        // Generate a random password
 
        $_POST['email'] = mysql_real_escape_string($_POST['email']);
        $_POST['username'] = mysql_real_escape_string($_POST['username']);
        // Escape the input data
 
        mysql_query("  INSERT INTO dh_members(usr,pass,email,regIP,dt)
                    VALUES(
                    '".$_POST['username']."',
                    '".md5($pass)."',
                    '".$_POST['email']."',
                    '".$_SERVER['REMOTE_ADDR']."',
                    NOW()
        )");
 
        if(mysql_affected_rows($link)==1)
        {
            send_mail(  'bayu.wryatsongko@gmail.com',
                    $_POST['email'],
                    'Registration System Demo - Your New Password',
                    'Your password is: '.$pass);
                    $_SESSION['msg']['reg-success']='We sent you an email with your new password!';
        }
        else $err[]='This username is already taken!';
    }
 
    if(count($err))
    {
        $_SESSION['msg']['reg-err'] = implode('<br />',$err);
    }
 
    header("Location: demo.php");
    exit;
}
 
$script = '';
if($_SESSION['msg'])
{
    // The script below shows the sliding panel on page load
    $script = '
    <script type="text/javascript">
    $(function(){
        $("div#panel").show();
        $("#toggle a").toggle();
    });
    </script>';
}
Berfungsi pada saat registrasi. Ubah email ane ya jadi email ente yang bayu.wryatsongko@gmail.com pada script diatas.:p
4. CSSnya, kita beri nama demo.css
berikut adalah file CSSnya yang kita beri nama demo.css. berikut isi dari demo.css tersebut.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{
    /* The reset rules */
    margin:0px;
    padding:0px;
}
 
body{
    color:#555555;
    font-size:13px;
    background: #eeeeee;
    font-family:Arial, Helvetica, sans-serif;
    width: 100%;
}
 
h1{
    font-size:28px;
    font-weight:bold;
    font-family:"Trebuchet MS",Arial, Helvetica, sans-serif;
    letter-spacing:1px;
}
 
h2{
    font-family:"Arial Narrow",Arial,Helvetica,sans-serif;
    font-size:10px;
    font-weight:normal;
    letter-spacing:1px;
    padding-left:2px;
    text-transform:uppercase;
    white-space:nowrap;
    margin-top:4px;
    color:#888888;
}
 
#main p{
    padding-bottom:8px;
}
 
.clear{
    clear:both;
}
 
#main{
    width:800px;
    /* Centering it in the middle of the page */
    margin:60px auto;
}
 
.container{
    margin-top:20px;
 
    background:#FFFFFF;
    border:1px solid #E0E0E0;
    padding:15px;
 
    /* Rounded corners */
    -moz-border-radius:20px;
    -khtml-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius:20px;
}
 
.err{
    color:red;
}
 
.success{
    color:#00CC00;
}
 
a, a:visited {
    color:#00BBFF;
    text-decoration:none;
    outline:none;
}
 
a:hover{
    text-decoration:underline;
}
 
.tutorial-info{
    text-align:center;
    padding:10px;
}

Css tersebut mewakili seluruh isi dari hasil programming kita tadi. saya sudah membuat css tersebut menjadi semudah mungkin, supaya anda dapat memahami nya dengan mudah.

6. Jquery
Berikut adalah file jquerynya yang dapat membentuk Slider Tab
1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
 
<!-- PNG FIX for IE6 -->
<!-- http://24ways.org/2007/supersleight-transparent-png-in-ie6 -->
<!--[if lte IE 6]>
<script type="text/javascript" src="login_panel/js/pngfix/supersleight-min.js"></script>
<![endif]-->
 
<script src="login_panel/js/slide.js" type="text/javascript"></script>
 
<?php echo $script; ?>

Diatas adalah jquery yang dapat membentuk slider tab login yang saya dapatkan dari web-kreation.com

Sekian dari ane. jika ada yangin ditanyaan lewat komentar. Anda bisa mendownload source codenya di bawah ini
Diposting oleh di
Label:

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)