Introduction IN MUET EXAM
-
Upload
vincent-mok -
Category
Documents
-
view
222 -
download
0
Transcript of Introduction IN MUET EXAM
-
8/13/2019 Introduction IN MUET EXAM
1/13
Introduction
Today we are making a cool & simple login / registration system. It will give you the abilityto easily create a member-only area on your site and provide an easy registration process.
It is going to be PHP driven and store all the registrations into a MySQL database.
To add the needed flair, we are using the amazingsliding jQuery panel,developed byWeb-kreation.
Step 1MySQL
First we have to create the table that will hold all the registrations. This code is available intable.sql.
table.sql
01--
02-- Table structure for table `tz_members`
03--
04
05CREATETABLE`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;
Notice that weve defined the id as an integer with auto_incrementit is automaticallyassigned to every site member. Also, weve defined usras an unique keyno two userswith the same usernames are allowed.
We later use this in the registration to determine whether the username has been taken.
After you create the table, do not forget to fill in your database credentials in connect.phpsoyou can run the demo on your own server.
Step 2XHTML
First, we have to incorporate Web-kreations form into our page.
demo.php
001
http://web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jquery/http://web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jquery/http://web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jquery/http://web-kreation.com/http://web-kreation.com/http://web-kreation.com/http://web-kreation.com/http://web-kreation.com/http://web-kreation.com/http://web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jquery/ -
8/13/2019 Introduction IN MUET EXAM
2/13
002
003
004
005
006
007The Sliding jQuery Panel
008A register/login solution
009You are free to use this login and registration systemin you sites!
010A Big Thanks
011
This tutorial was built on top of Web-Kreation's amazing slidingpanel.
012
013014
018
019
020
021
022Member Login
023
024
032
033Username:
034
035Password:
036
037 Remember me
038
039
040041
http://web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jqueryhttp://web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jqueryhttp://web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jqueryhttp://web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jqueryhttp://web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jqueryhttp://web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jqueryhttp://web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jqueryhttp://web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jquery -
8/13/2019 Introduction IN MUET EXAM
3/13
-
8/13/2019 Introduction IN MUET EXAM
4/13
084
085Members panel
086
You can put member-only data here
087View a special member page
088
- or -
089Log off
090
091
092
093
094
098099
100
101
102
103
104
105
106Hello !
107| 108
109
110ClosePanel
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 islogged in the site, which allows us to show specific content to site members. We will cover itin detail in a moment.
After the form, we put the rest of the page.
01
02
-
8/13/2019 Introduction IN MUET EXAM
5/13
03
04
05
06A Cool Login System
07Easy 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.
The login system
Step 3PHP
It is time to convert the form into a complete registration and login system. To achieve it, wewill 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
01define('INCLUDE_CHECK',true); 02
-
8/13/2019 Introduction IN MUET EXAM
6/13
03require'connect.php';
04require'functions.php';
05
06// Those two files can be included only if INCLUDE_CHECK is defined
0708session_name('tzLogin');
09// Starting the session
10
11session_set_cookie_params(2*7*24*60*60);
12// Making the cookie live for 2 weeks
13
14session_start();
15
16
if($_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();
22 session_destroy();
23
24 // Destroy the session
25}
26
27if(isset($_GET['logoff']))
28{
29 $_SESSION= array();
30 session_destroy();
31 header("Location: demo.php");
32 exit;
33}
3435if($_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
-
8/13/2019 Introduction IN MUET EXAM
7/13
-
8/13/2019 Introduction IN MUET EXAM
8/13
-
8/13/2019 Introduction IN MUET EXAM
9/13
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= '';
61if($_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 $errarray, 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,
the data is sent all over again. This could become problematic as it could lead to a doubleregistrations and unnecessary server load.
We use the header function to prevent this, by redirecting the browser to the same page. Thisstarts a fresh view of the page, without the browser associating it with a form submit. Theresult is that, on page refresh, no data is sent.
But as we use $_SESSIONto store all the encountered errors it is important that we unsetthese 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 PHPcode) which shows the panel on page load, so that the messages are visible to the user.
-
8/13/2019 Introduction IN MUET EXAM
10/13
Now lets take a look at the CSS.
The registration / login system
Step 4CSS
The sliding panel comes with its own style sheet. This means we are only left with creatingthe page styles.
demo.css
01body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{ 02 /* The reset rules */
03 margin:0px;
04 padding:0px;
05}
06
07body{
08 color:#555555;
09 font-size:13px;
10 background: #eeeeee;
11 font-family:Arial, Helvetica, sans-serif;12 width: 100%;
-
8/13/2019 Introduction IN MUET EXAM
11/13
13}
14
15h1{
16 font-size:28px;
17 font-weight:bold;
18 font-family:"Trebuchet MS",Arial, Helvetica, sans-serif;
19 letter-spacing:1px;
20}
21
22h2{
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;
52 border:1pxsolid#E0E0E0;
53 padding:15px;
54
55 /* Rounded corners */
56 -moz-border-radius:20px;
-
8/13/2019 Introduction IN MUET EXAM
12/13
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
70a, a:visited {
71 color:#00BBFF;72 text-decoration:none;
73 outline:none;
74}
75
76a:hover{
77 text-decoration:underline;
78}
79
80.tutorial-info{
81 text-align:center;
82 padding:10px;
83}
Step 5jQuery
The sliding panel comes with its own jQuery files.
demo.php
01
02
03
04
05
0809
http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jshttp://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.jshttp://24ways.org/2007/supersleight-transparent-png-in-ie6http://24ways.org/2007/supersleight-transparent-png-in-ie6http://24ways.org/2007/supersleight-transparent-png-in-ie6http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js -
8/13/2019 Introduction IN MUET EXAM
13/13
10
11
First we include the jQuery library from Googles CDN. Later comes a special fix for IE6
PNG transparency issues and lastly the panels script is included.
At the bottom of the page is the $script variableit 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.