login sceen php
TRANSCRIPT
-
7/31/2019 Login Sceen Php
1/14
TUGAS LOGIN REGISTRATION
Step 1 MySQL
Pertama membuat tabel yang akan memegang semua pendaftaran
table.sql
01 --
02 -- Table structure for table `tz_members`
03 --
04
05 CREATETABLE`tz_members` (
06 `id` int(11) NOTNULLauto_increment,
07 `usr` varchar(32) collateutf8_unicode_ci NOTNULLdefault'',
08 `pass` varchar(32) collateutf8_unicode_ci NOTNULLdefault'',09 `email` varchar(255) collateutf8_unicode_ci NOTNULLdefault'',
10 `regIP` varchar(15) collateutf8_unicode_ci NOTNULLdefault'',
11 `dt` datetime NOTNULLdefault'0000-00-00 00:00:00',
12 PRIMARYKEY (`id`),
13 UNIQUEKEY`usr` (`usr`)
14 ) ENGINE=MyISAM DEFAULTCHARSET=utf8 COLLATE=utf8_unicode_ci;
Perhatikan bahwa kita telah mendefinisikan id sebagai integerdengan AUTO_INCREMENT - itu secara otomatis ditetapkan kesetiapanggota situs. Juga, kita telah mendefinisikan user sebagai kunci unik - tidak adadua pengguna dengan username yang sama diperbolehkan.Kami kemudian menggunakan ini dalam pendaftaran untuk menentukanapakah username telah diambil. Setelah Anda membuat tabel, jangan lupa untukmengisikredensial database Anda dalam connect.php sehingga Anda dapatmenjalankan demo di server Anda sendiri.
Step 2 XHTML
001
002
003
-
7/31/2019 Login Sceen Php
2/14
004 005
006
007 The Sliding jQuery Panel
008 A register/login solution
009You are free to use this login and registration system inyou sites!
010 A Big Thanks
011
This tutorial was built on top of Web-Kreation's amazing slidingpanel.
012
013
014
018
019
020
021
022 Member Login
023
024
032
033 Username:
034
035 Password:
036
-
7/31/2019 Login Sceen Php
3/14
/>
037 Remember me
038
039
040
041
042
043
044
045
046
047
048 049 Not a member yet? Sign Up!
050
051
068
069 Username:
070
-
7/31/2019 Login Sceen Php
4/14
071 Email:
072
073 A password will be e-mailed to you.
074
075 076
077
078
079
083
084
085 Members panel
086
You can put member-only data here
087 View a special member page
088
- or -
089 Log off
090
091
092
093
094
098
099
100
101 102
103
104
105
106 Hello !
-
7/31/2019 Login Sceen Php
5/14
107 |
108
109
110 Close Panel
111
112 113
114
115
116
At several places in this code, there are some PHP operators that check whether$_SESSION['usr'] or$_SESSION['id'] are defined. This is true only if the page visitor is loggedin the site, which allows us to show specific content to site members. We will cover it in detail in amoment.
After the form, we put the rest of the page.
01
02
03
04
05 06 A Cool Login System
07 Easy registration management with PHP & jQuery
08
09
10
11
This is a ...
12
13
14
15
16
Nothing special here. Lets continue with the PHP backend.
-
7/31/2019 Login Sceen Php
6/14
The login system
Step 3 PHP
It is time to convert the form into a complete registration and login system. To achieve it, we will
need more than the usual amount of PHP. Ill divide the code into two parts.
If you plan to add more code, it would be a good idea to split it into several files which areincluded when needed. This aids the development of large projects and allows code reuse indifferent parts of a site.
But lets see how weve done it here.
demo.php
view source
print?01 define('INCLUDE_CHECK',true);
02
03 require'connect.php';
04 require'functions.php';
05
06 // Those two files can be included only if INCLUDE_CHECK is defined
07
08 session_name('tzLogin');
09 // Starting the session
10
11 session_set_cookie_params(2*7*24*60*60);
12 // Making the cookie live for 2 weeks
13
14 session_start();
15
16if($_SESSION['id'] && !isset($_COOKIE['tzRemember']) && !$_SESSION['rememberMe'])
17 {
18// If you are logged in, but you don't have the tzRemember cookie
(browser restart)
19 // and you have not checked the rememberMe checkbox:
20
21 $_SESSION= array();
http://tutorialzine.com/2009/10/cool-login-system-php-jquery/#viewSourcehttp://tutorialzine.com/2009/10/cool-login-system-php-jquery/#printSourcehttp://tutorialzine.com/2009/10/cool-login-system-php-jquery/#abouthttp://tutorialzine.com/2009/10/cool-login-system-php-jquery/#viewSourcehttp://tutorialzine.com/2009/10/cool-login-system-php-jquery/#printSourcehttp://tutorialzine.com/2009/10/cool-login-system-php-jquery/#about -
7/31/2019 Login Sceen Php
7/14
22 session_destroy();
23
24 // Destroy the session
25 }
26
27 if(isset($_GET['logoff']))
28 {
29 $_SESSION= array();
30 session_destroy();
31 header("Location: demo.php");
32 exit;
33 }
34
35 if($_POST['submit']=='Login')
36 {
37 // Checking whether the Login form has been submitted
38
39 $err= array();
40 // Will hold our errors
41
42 if(!$_POST['username'] || !$_POST['password'])
43 $err[] = 'All the fields must be filled in!';
44
45 if(!count($err))
46 {
47 $_POST['username'] = mysql_real_escape_string($_POST['username']);
48 $_POST['password'] = mysql_real_escape_string($_POST['password']);
49 $_POST['rememberMe'] = (int)$_POST['rememberMe'];
50
51 // Escaping all input data
52
53$row= mysql_fetch_assoc(mysql_query("SELECT id,usr FROM tz_members
WHERE usr='{$_POST['username']}' AND pass='".md5($_POST['password'])."'"));
54
55 if($row['usr'])
56 {
-
7/31/2019 Login Sceen Php
8/14
57 // If everything is OK login
58
59 $_SESSION['usr']=$row['usr'];
60 $_SESSION['id'] = $row['id'];
61 $_SESSION['rememberMe'] = $_POST['rememberMe'];
62
63 // Store some data in the session
64
65 setcookie('tzRemember',$_POST['rememberMe']);
66 // We create the tzRemember cookie
67 }
68 else$err[]='Wrong username and/or password!';69 }
70 71 if($err)
72 $_SESSION['msg']['login-err'] = implode('
',$err);73 // Save the error messages in the session
74
75 header("Location: demo.php");
76 exit;
77 }
Here the tzRemember cookie acts as a control whether we should log-off users that have notmarked the remember me checkbox. If the cookie is not present (due to browser restart) and thevisitor has not checked the remember me option, we destroy the session.
The session itself is kept alive for two weeks (as set by session_set_cookie_params ).
Lets see the second part ofdemo.php.
view sourceprint?01 elseif($_POST['submit']=='Register')
02 {
03 // If the Register form has been submitted
04 $err= array();
05
06 if(strlen($_POST['username'])32)
07 {
http://tutorialzine.com/2009/10/cool-login-system-php-jquery/#viewSourcehttp://tutorialzine.com/2009/10/cool-login-system-php-jquery/#printSourcehttp://tutorialzine.com/2009/10/cool-login-system-php-jquery/#abouthttp://tutorialzine.com/2009/10/cool-login-system-php-jquery/#viewSourcehttp://tutorialzine.com/2009/10/cool-login-system-php-jquery/#printSourcehttp://tutorialzine.com/2009/10/cool-login-system-php-jquery/#about -
7/31/2019 Login Sceen Php
9/14
08 $err[]='Your username must be between 3 and 32 characters!';
09 }
10
11 if(preg_match('/[^a-z0-9\-\_\.]+/i',$_POST['username']))
12 {
13 $err[]='Your username contains invalid characters!';
14 }
15
16 if(!checkEmail($_POST['email']))
17 {
18 $err[]='Your email is not valid!';
19 }
20
21 if(!count($err))
22 {
23 // If there are no errors
24$pass=
substr(md5($_SERVER['REMOTE_ADDR'].microtime().rand(1,100000)),0,6);
25 // Generate a random password
26
27 $_POST['email'] = mysql_real_escape_string($_POST['email']);
28 $_POST['username'] = mysql_real_escape_string($_POST['username']);
29 // Escape the input data
30
31 mysql_query(" INSERT INTO tz_members(usr,pass,email,regIP,dt)
32 VALUES(
33 '".$_POST['username']."',
34 '".md5($pass)."',
35 '".$_POST['email']."',
36 '".$_SERVER['REMOTE_ADDR']."',
37 NOW()38 )");
39
40 if(mysql_affected_rows($link)==1)
41 {
42 send_mail( '[email protected]',
-
7/31/2019 Login Sceen Php
10/14
43 $_POST['email'],
44 'Registration System Demo - Your New Password',
45 'Your password is: '.$pass);
46$_SESSION['msg']['reg-success']='We sent you an email
with your new password!';47 }
48 else$err[]='This username is already taken!';49 }
50
51 if(count($err))
52 {
53 $_SESSION['msg']['reg-err'] = implode('
',$err);54 }
55
56 header("Location: demo.php");
57 exit;
58 }
59
60 $script= '';61 if($_SESSION['msg'])
62 {
63 // The script below shows the sliding panel on page load
64 $script= '
65
66 $(function(){
67 $("div#panel").show();
68 $("#toggle a").toggle();
69 });
70 ';
71 }
We store all the encountered errors in an $err array, which is later assigned to a $_SESSIONvariable. This allows it to be accessible after a browser redirect.
You may have noticed on some sites, that when you submit a form and later refresh the page, thedata is sent all over again. This could become problematic as it could lead to a double registrationsand unnecessary server load.
-
7/31/2019 Login Sceen Php
11/14
We use the header function to prevent this, by redirecting the browser to the same page. This startsa fresh view of the page, without the browser associating it with a form submit. The result is that,on page refresh, no data is sent.
But as we use $_SESSION to store all the encountered errors it is important that we unset these
variables, once we show the errors to the user. Otherwise they will be shown on every page view(the highlighted lines on the XHTML part of the tutorial).
Also notice how we create an additional script (lines 60-70 of the second part of the PHP code)which shows the panel on page load, so that the messages are visible to the user.
Now lets take a look at the CSS.
The registration / login system
Step 4 CSS
The sliding panel comes with its own style sheet. This means we are only left with creating thepage styles.
demo.css
view sourceprint?01 body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{
02 /* The reset rules */
03 margin:0px;
04 padding:0px;
05 }
06
07 body{
08 color:#555555;
09 font-size:13px;
10 background: #eeeeee;11 font-family:Arial, Helvetica, sans-serif;
12 width: 100%;
13 }
14
15 h1{
http://tutorialzine.com/2009/10/cool-login-system-php-jquery/#viewSourcehttp://tutorialzine.com/2009/10/cool-login-system-php-jquery/#printSourcehttp://tutorialzine.com/2009/10/cool-login-system-php-jquery/#abouthttp://tutorialzine.com/2009/10/cool-login-system-php-jquery/#viewSourcehttp://tutorialzine.com/2009/10/cool-login-system-php-jquery/#printSourcehttp://tutorialzine.com/2009/10/cool-login-system-php-jquery/#about -
7/31/2019 Login Sceen Php
12/14
16 font-size:28px;
17 font-weight:bold;
18 font-family:"Trebuchet MS",Arial, Helvetica, sans-serif;
19 letter-spacing:1px;
20 }
21
22 h2{
23 font-family:"Arial Narrow",Arial,Helvetica,sans-serif;
24 font-size:10px;
25 font-weight:normal;
26 letter-spacing:1px;
27 padding-left:2px;
28 text-transform:uppercase;
29 white-space:nowrap;
30 margin-top:4px;
31 color:#888888;
32 }
33
34 #main p{
35 padding-bottom:8px;
36 }
37
38 .clear{
39 clear:both;
40 }
41
42 #main{
43 width:800px;
44 /* Centering it in the middle of the page */
45 margin:60pxauto;
46 }
47
48 .container{
49 margin-top:20px;
50
51 background:#FFFFFF;
-
7/31/2019 Login Sceen Php
13/14
52 border:1pxsolid#E0E0E0;53 padding:15px;
54
55 /* Rounded corners */
56 -moz-border-radius:20px;57 -khtml-border-radius: 20px;
58 -webkit-border-radius: 20px;
59 border-radius:20px;
60 }
61
62 .err{
63 color:red;
64 }
65
66 .success{
67 color:#00CC00;
68 }
69
70 a, a:visited {
71 color:#00BBFF;
72 text-decoration:none;
73 outline:none;
74 }
75
76 a:hover{
77 text-decoration:underline;
78 }
79
80 .tutorial-info{
81 text-align:center;
82 padding:10px;
83 }
Step 5 jQuery
The sliding panel comes with its own jQuery files.
-
7/31/2019 Login Sceen Php
14/14
demo.php
view sourceprint?
01
02
03
04
05
08
09
10
11
First we include the jQuery library from Googles CDN. Later comes a special fix for IE6 PNGtransparency issues and lastly the panels script is included.
At the bottom of the page is the $script variable it shows the panel on page load if needed.
With this our cool login system is complete!
Conclusion
Today we learned how to use a fantastic form component and turn it into a functional log in /registration system.
You are free to built upon this code and modify it any way you see fit.
http://tutorialzine.com/2009/10/cool-login-system-php-jquery/#viewSourcehttp://tutorialzine.com/2009/10/cool-login-system-php-jquery/#printSourcehttp://tutorialzine.com/2009/10/cool-login-system-php-jquery/#abouthttp://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jshttp://24ways.org/2007/supersleight-transparent-png-in-ie6http://tutorialzine.com/2009/10/cool-login-system-php-jquery/#viewSourcehttp://tutorialzine.com/2009/10/cool-login-system-php-jquery/#printSourcehttp://tutorialzine.com/2009/10/cool-login-system-php-jquery/#abouthttp://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jshttp://24ways.org/2007/supersleight-transparent-png-in-ie6