membuat sebuah sistem masuk keren dengan php, mysql & jquery

Membuat Sebuah Sistem Masuk Keren Dengan PHP, MySQL & jQuery

Pengantar

Hari ini kita membuat suatu sistem login / pendaftaran keren & sederhana. Ini akan memberi Anda kemampuan untuk dengan mudah membuat area anggota-satunya di situs Anda dan memberikan proses pendaftaran mudah.

Hal ini akan menjadi PHP didorong dan menyimpan semua pendaftaran ke dalam database MySQL.

Untuk menambahkan bakat yang dibutuhkan, kita menggunakan menakjubkan panel jQuery geser , yang dikembangkan oleh Web-kreation .

Langkah 1 - MySQL

Pertama kita harus membuat tabel yang akan menampung semua pendaftaran. Kode ini tersedia dalam table.sql.

table.sql

01-- -

02-- Table structure for table `tz_members` - Tabel struktur untuk tz_members tabel `

03-- -

04

05

CREATE TABLE `tz_members` ( CREATE TABLE `tz_members` (

06

ìd` int(11) NOT NULL auto_increment, Ìd` int (11) NOT NULL AUTO_INCREMENT,

07

ùsr` varchar(32) collate utf8_unicode_ci NOT NULL default '', Ùsr` varchar (32) menyusun utf8_unicode_ci'' TIDAK NULL default,

08 <span

class="google-src-text" style="direction: ltr; text-align: left">`pass` varchar(32) collate utf8_unicode_ci NOT NULL default '', `Lulus` varchar (32) menyusun utf8_unicode_ci NOT NULL'' standar,

09

èmail` varchar(255) collate utf8_unicode_ci NOT NULL default '', Èmail` varchar (255) menyusun utf8_unicode_ci'' TIDAK NULL default,

10

`regIP` varchar(15) collate utf8_unicode_ci NOT NULL default '', `RegIP` varchar (15) menyusun utf8_unicode_ci'' TIDAK NULL default,

11

`dt` datetime NOT NULL default '0000-00-00 00:00:00', `Dt` datetime NOT NULL standar '0000-00-00 00:00:00 ',

12

PRIMARY KEY (ìd`), PRIMARY KEY (ìd`),

13

UNIQUE KEY ùsr` (ùsr`) UNIK KEY ùsr` (ùsr`)

14

) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci; ) ENGINE = MyISAM DEFAULT CHARSET = utf8 COLLATE = utf8_unicode_ci;

Perhatikan bahwa kita telah mendefinisikan id sebagai integer dengan auto_increment - secara otomatis ditetapkan untuk setiap anggota situs. Juga, kami telah didefinisikan usr sebagai kunci unik - tidak ada dua pengguna dengan username yang sama diperbolehkan.

Kami kemudian menggunakan ini dalam registrasi untuk menentukan apakah username telah diambil.

Setelah Anda membuat tabel, jangan lupa untuk mengisi kredensial database Anda di connect.php sehingga Anda dapat menjalankan demo di server Anda sendiri.

Langkah 2 - XHTML

Pertama, kita harus memasukkan formulir Web-kreation ke dalam halaman kami.

demo.php

001 <- Panel ->

002 <span class="google-

src-text" style="direction: ltr; text-align: left"><div id="toppanel"> <div id="toppanel">

003

004

<div id="panel"> <div id="panel">

005

<div class="content clearfix"> <div class="content clearfix">

006

<div class="left"> <div class="left">

007<h1>The Sliding jQuery Panel</h1> <h1> Panel jQuery Sliding </ h1>

008<h2>A register/login solution</h2> <h2> Sebuah solusi mendaftar / login </ h2>

009

You are free to use this login and registration system in you sites! Anda bebas untuk menggunakan sistem login dan pendaftaran di situs Anda !

010<h2>A Big Thanks</h2> <h2> A Big Thanks </ h2>

011

This tutorial was built on top of <a href="http://web-kreation.com/index.php/tutorials/nice-clean-sliding-

login-panel-built-with-jquery" title="Go to site">Web-Kreation</a>'s amazing sliding panel. Tutorial ini dibangun di atas <a href = "http://web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with- jquery "title =" Pergi ke situs "> Web-Kreation </ a> 's panel geser menakjubkan .

012</div> </ Div>

013

014<?php <? Php

015if(!$_SESSION['id']): if ($ _SESSION ['id']!):

src-text" style="direction: ltr; text-align: left">// If you are not logged in / / Jika Anda tidak login

017?> ?>

018

019


020 <- Login Form ->

021

<form class="clearfix" action="" method="post"> <form class="clearfix" action="" method="post">

022<h1>Member Login</h1> Login Anggota <h1> </ h1>

023


025if($_SESSION['msg']['login-err']) if ($ _SESSION ['msg'] ['login-err'])

026{ {

027

echo '<div class="err">'.$_SESSION['msg']['login-err'].'</div>'; echo '<div class="err">' $ _SESSION ['msg'] ['login-err'] '</ div>'..;

028

unset($_SESSION['msg']['login-err']); unset ($ _SESSION ['msg'] ['login-err']);

029

// This will output login errors, if any / / Ini akan menampilkan kesalahan masuk, jika ada

030} }


032

033 <label class="grey"

for="username">Username:</label> <label class="grey" for="username"> Username: </ label>

034

<input class="field" type="text" name="username" id="username" value="" size="23" /> <input type="text" class="field" name="username" id="username" value="" size="23" />

035

<label class="grey" for="password">Password:</label> <label class="grey" for="password"> Password: </ label>

036

<input class="field" type="password" name="password" id="password" size="23" /> <input class="field" type="password" name="password" id="password" size="23" />

037

<label><input name="rememberMe" id="rememberMe" type="checkbox" checked="checked" value="1" /> Remember me</label> <label> <input name="rememberMe" id="rememberMe" type="checkbox" checked="checked" value="1" /> Ingat saya </ label>

038

<div class="clear"></div> <div class="clear"> </ div>

039

<input type="submit" name="submit" value="Login" class="bt_login" /> <input type="submit" name="submit" value="Login" class="bt_login" />

040</form> </ Form>

041


043

044

<div class="left right"> <div class="left right">

045

046 <-! Daftar Form ->

047

048

<form action="" method="post"> <form action="" method="post">

049

<h1>Not a member yet? <h1> Belum menjadi anggota? Sign Up!</h1> Sign Up! </ H1>

050


052

053if($_SESSION['msg']['reg-err']) if ($ _SESSION ['msg'] ['reg-err'])


055

echo '<div class="err">'.$_SESSION['msg']['reg-err'].'</div>'; echo '<div class="err">' $ _SESSION ['msg'] ['reg-err'] '</ div>'..;

056

unset($_SESSION['msg']['reg-err']); unset ($ _SESSION ['msg'] ['reg-err']);

057

// This will output the registration errors, if any / / Ini akan menampilkan kesalahan pendaftaran, jika ada


059

060

if($_SESSION['msg']['reg-success']) if ($ _SESSION ['msg'] ['reg-keberhasilan'])


062 echo '<div class="success">'.$_SESSION['msg']['reg-success'].'</div>'; echo

'<div class="success">' $ _SESSION ['msg'] ['reg-keberhasilan'] '</

div>'..;

063

unset($_SESSION['msg']['reg-success']); unset ($ _SESSION ['msg'] ['reg-keberhasilan']);

064

// This will output the registration success message / / Ini akan menampilkan pesan sukses registrasi


066


068

069

<label class="grey" for="username">Username:</label> <label class="grey" for="username"> Username: </ label>

070

<input class="field" type="text" name="username" id="username" value="" size="23" /> <input type="text" class="field" name="username" id="username" value="" size="23" />

071

<label class="grey" for="email">Email:</label> <label class="grey" for="email"> Email: </ label>

072

<input class="field" type="text" name="email" id="email" size="23" /> <input type="text" class="field" name="email" id="email" size="23" />

073

<label>A password will be e-mailed to you.</label> <label> Sebuah kata sandi akan e-mail kepada Anda </ label>.

074

<input type="submit" name="submit" value="Register" class="bt_register" /> <input type="submit" name="submit" value="Register" class="bt_register" />

075</form> </ Form>

076

077 </div> </

Div>

078


080else: lain:

081// If you are logged in / / Jika Anda login


083

084


085<h1>Members panel</h1> Anggota <h1> panel </ h1>

086

You can put member-only data here Anda dapat menempatkan anggota-satunya data di sini 

087

<a href="registered.php">View a special member page</a>

href="registered.php"> <a Lihat halaman khusus anggota </ a>

088- or - - atau - 

089

<a href="?logoff">Log off</a> <a href="?logoff"> Log off </ a>


091

<div class="left right"> <div class="left right">


093

094 <?php <?

Php

095endif; endif;

096// Closing the IF-ELSE construct / / Menutup IF-ELSE membangun


098


100</div>  </ Div> <-! / Login ->

101

102 <- Tab di atas -!>

103

<div class="tab"> <div class="tab">

104

<ul class="login"> <ul class="login">

105

<li class="left"> </li> <li class="left"> </ li>

106

<li>Hello <?php echo $_SESSION['usr'] ? <li> Hello <? php menggemakan $ _SESSION ['usr']? $_SESSION['usr'] : 'Guest';?>!</li> $ _SESSION ['Usr']:!? 'Guest';> </ li>

107

<li class="sep">|</li> <li class="sep"> | </ li>

108

<li id="toggle"> <li id="toggle">

109 <a id="open" class="open" href="#"><?php echo $_SESSION['id']?'Open Panel':'Log In | Register';?></a> <a id="open" class="open" href="#"> <? php echo $

_SESSION ['id'] 'Panel Buka':? 'Log In | Register';?> </ a>

110

<a id="close" style="display: none;" class="close" href="#">Close Panel</a> <a id="close" style="display: none;" class="close" href="#"> Panel Tutup </ a>

111</li> </ Li>

112

<li class="right"> </li> <li class="right"> </ li>

113</ul> </ Ul>

114

115</div>  </ Div> <-! / Top ->

116</div>  </ Div> <-! Panel ->

Pada beberapa tempat di kode ini, ada beberapa operator PHP yang memeriksa apakah $ _SESSION ['usr'] atau $ _SESSION ['id'] didefinisikan. Hal ini berlaku hanya jika pengunjung halaman login di situs, yang memungkinkan kita untuk menampilkan konten khusus untuk anggota situs. Kami akan mencakup secara rinci dalam sekejap.

Setelah formulir, kami menempatkan sisa halaman.

01

<div class="pageContent"> <div class="pageContent">

02

03

<div id="main"> <div id="main">

04

05

<div class="container"> <div class="container">

06<h1>A Cool Login System</h1> <h1> Sebuah Sistem Masuk Keren </ h1>

src-text" style="direction: ltr; text-align: left"><h2>Easy registration management with PHP & jQuery</h2> <h2> manajemen pendaftaran Mudah dengan PHP & jQuery </ h2>


09

10

<div class="container"> <div class="container">

11This is a ... ini adalah ... 

12

<div class="clear"></div> <div class="clear"> </ div>

13


15


Tidak ada yang istimewa di sini. Mari kita lanjutkan dengan backend PHP.

Sistem login

Langkah 3 - PHP

Ini adalah waktu untuk mengubah bentuk menjadi sebuah pendaftaran lengkap dan sistem login. Untuk mencapai itu, kita akan membutuhkan lebih dari jumlah biasa PHP. Saya akan membagi kode menjadi dua bagian.

Jika Anda berencana untuk menambahkan lebih banyak kode, itu akan menjadi ide yang baik untuk membagi ke dalam beberapa file yang disertakan saat diperlukan. Ini membantu pengembangan proyek-proyek besar dan memungkinkan penggunaan kembali kode di bagian yang berbeda dari situs.

Tapi mari kita lihat bagaimana kita melakukannya di sini.

demo.php

01

define('INCLUDE_CHECK',true); define ('INCLUDE_CHECK', true);

02

03

require 'connect.php'; require 'connect.php';

04require 'functions.php'; membutuhkan 'functions.php';

05

06

// Those two files can be included only if INCLUDE_CHECK is defined / / Kedua file dapat dimasukkan hanya jika INCLUDE_CHECK didefinisikan

07

08session_name('tzLogin'); session_name ('tzLogin');

09// Starting the session / / Mulai sesi

10

11

session_set_cookie_params(2*7*24*60*60); session_set_cookie_params (2 * 7 * 24 * 60 * 60);

12// Making the cookie live for 2 weeks / / Membuat cookie hidup selama 2 minggu

13

14session_start(); session_start ();

15

16

if($_SESSION['id'] && !isset($_COOKIE['tzRemember']) && !$_SESSION['rememberMe']) if ($ _SESSION ['id'] && isset ($ _COOKIE ['tzRemember'])! && $ _SESSION! ['rememberMe'])


18

// If you are logged in, but you don't have the tzRemember cookie (browser restart) / / Jika Anda login, tetapi Anda tidak memiliki cookie tzRemember (browser restart)

19

// and you have not checked the rememberMe checkbox: / / Dan Anda belum memeriksa kotak centang rememberMe:

20

21 $_SESSION = array(); $ _SESSION = Array ();

22 session_destroy(); session_destroy ();

23

24 // Destroy the session / / Hancurkan sesi


26

27

if(isset($_GET['logoff'])) if (isset ($ _GET ['logoff']))


29 $_SESSION = array(); $ _SESSION = Array ();

class="google-src-text" style="direction: ltr; text-align: left">session_destroy(); session_destroy ();

31

header("Location: demo.php"); header ("Location: demo.php");

32 exit; exit;


34

35

if($_POST['submit']=='Login') if ($ _POST ['submit'] == 'Login')


37

// Checking whether the Login form has been submitted / / Memeriksa apakah bentuk Masuk telah disampaikan

38

39

$err = array(); $ Err = array ();

40 // Will hold our errors / / Akan terus kesalahan kami

41

42

if(!$_POST['username'] || !$_POST['password']) if ($ _POST ['username'] |! |! $ _POST ['password'])

43

$err[] = 'All the fields must be filled in!'; $ Err [] = 'Semua bidang harus diisi!';

44

45

if(!count($err)) if (count ($ err)!)

46 { {

47

$_POST['username'] = mysql_real_escape_string($_POST['username']); $ _POST ['Username'] = mysql_real_escape_string ($ _POST ['username']);

48

$_POST['password'] = mysql_real_escape_string($_POST['password']); $ _POST ['Password'] = mysql_real_escape_string ($ _POST ['password']);

49

$_POST['rememberMe'] = (int)$_POST['rememberMe']; $ _POST ['RememberMe'] = (int) $ _POST ['rememberMe'];

50

51 // Escaping all input data / / Escaping semua data input

52

53

$row = mysql_fetch_assoc(mysql_query("SELECT id,usr FROM tz_members WHERE usr='{$_POST['username']}' AND pass='".md5($_POST['password'])."'")); $ Row = mysql_fetch_assoc (mysql_query ("SELECT id, usr DARI MANA tz_members usr = '{$ _POST ['

username ']}' AND pass = '" [password']). Md5 ($ _POST. '"'")) ;

54

55

if($row['usr']) if ($ row ['usr'])


57 // If everything is OK login / / Jika semuanya OK masuk

58

59

$_SESSION['usr']=$row['usr']; $ _SESSION ['Usr'] = $ row ['usr'];

60

$_SESSION['id'] = $row['id']; $ _SESSION ['Id'] = $ row ['id'];

class="google-src-text" style="direction: ltr; text-align: left">$_SESSION['rememberMe'] = $_POST['rememberMe']; $ _SESSION ['RememberMe'] = $ _POST ['rememberMe'];

62

63

// Store some data in the session / / Menyimpan beberapa data dalam sesi

64

65

setcookie('tzRemember',$_POST['rememberMe']); setcookie ('tzRemember', $ _POST ['rememberMe']);

66

// We create the tzRemember cookie / / Kami menciptakan cookie tzRemember

67 } }

68

else $err[]='Wrong username and/or password!'; lain $ err [] = 'Username salah dan / atau password!';


70

71

if($err) if ($ err)

72

$_SESSION['msg']['login-err'] = implode(' ',$err); $ _SESSION ['Msg'] ['login-err'] = implode (' ', $ err);

73

// Save the error messages in the session / / Simpan pesan kesalahan dalam sesi

74

75


76 <span class="google-src-text" style="direction: ltr; text-align:

left">exit; exit;


Berikut cookie tzRemember bertindak sebagai kontrol apakah kita harus log-off pengguna yang belum menandai "ingat saya" kotak centang. Jika cookie tidak hadir (karena me-restart browser) dan pengunjung belum memeriksa ingat saya pilihan, kita menghancurkan sesi.

Sesi itu sendiri tetap hidup selama dua minggu (seperti yang ditetapkan oleh session_set_cookie_params).

Mari kita lihat bagian kedua dari demo.php.

01

else if($_POST['submit']=='Register') else if ($ _POST ['submit'] == 'Register')


03

// If the Register form has been submitted / / Jika bentuk Register telah disampaikan

04

$err = array(); $ Err = array ();

05

06

if(strlen($_POST['username'])<4 ||

strlen($_POST['username'])>32) if (strlen ($ _POST ['username']) <4 | | strlen ($ _POST ['username'])> 32)


08

$err[]='Your username must be between 3 and 32 characters!'; $ Err [] = 'Nama pengguna harus antara 3 dan 32 karakter!';


10

11 if(preg_match('/[^a-z0-9\-\_\.]+/i',$_POST['username'])) if

(preg_match ('/ [^ a-z0-9 \ -. \ _ \] + / i', $ _POST ['username']))


13

$err[]='Your username contains invalid characters!'; $ Err [] = 'Nama pengguna mengandung karakter yang tidak valid!';


15

16

if(!checkEmail($_POST['email'])) if (checkEmail ($ _POST ['email'])!)


18

$err[]='Your email is not valid!'; $ Err [] = 'Email Anda tidak valid!';


20

21

if(!count($err)) if (count ($ err)!)


23 // If there are no errors / / Jika tidak ada kesalahan

24

$pass = substr(md5($_SERVER['REMOTE_ADDR'].microtime().rand(1,100000)),0,6);

$ Lulus = substr (md5 ($ _SERVER ['REMOTE_ADDR'] microtime () rand (1,100000)), 0,6..);

25 // Generate a random password / / Menghasilkan password acak

26

27 <span class="google-src-text" style="direction: ltr; text-align:

left">$_POST['email'] = mysql_real_escape_string($_POST['email']); $ _POST ['Email'] = mysql_real_escape_string ($ _POST ['email']);

28

$_POST['username'] = mysql_real_escape_string($_POST['username']); $ _POST ['Username'] = mysql_real_escape_string ($ _POST ['username']);

29 // Escape the input data / / Melarikan diri input data

30

31

mysql_query(" INSERT INTO tz_members(usr,pass,email,regIP,dt) mysql_query ("INSERT INTO tz_members (usr, lulus, email, regIP, dt)

32 VALUES( VALUES (

33

'".$_POST['username']."', '". $ _POST [' Username ']."',

34 '".md5($pass)."', '"Md5 ($ pass).."',

35

'".$_POST['email']."', '". $ _POST [' Email ']."',

36

'".$_SERVER['REMOTE_ADDR']."', '". $ _SERVER [' REMOTE_ADDR ']."',

37 NOW() SEKARANG ()

38 )"); ) ");

39

40

if(mysql_affected_rows($link)==1) if (mysql_affected_rows ($ link) == 1)

class="google-src-text" style="direction: ltr; text-align: left">send_mail( '[email protected]', send_mail ('[email protected]',

43 $_POST['email'], $ _POST ['Email'],

44

'Registration System Demo - Your New Password', 'Sistem Registrasi Demo - New Password Anda,

45

'Your password is: '.$pass); 'Password anda

adalah:' $ pass);.

46

$_SESSION['msg']['reg-success']='We sent you an email with your new password!'; $ _SESSION ['Msg'] ['reg-keberhasilan'] = 'Kami mengirimkan email dengan password baru Anda!';


48

else $err[]='This username is already taken!'; lain $ err [] = 'Nama pengguna ini sudah diambil!';


50

51

if(count($err)) if (count ($ err))


53

$_SESSION['msg']['reg-err'] = implode(' ',$err); $ _SESSION ['Msg'] ['reg-err'] = implode (' ', $ err);


55

56

57 exit; exit;


59

60$script = ''; $ Script ='';

61

if($_SESSION['msg']) if ($ _SESSION ['msg'])


63

// The script below shows the sliding panel on page load / / Script di bawah ini menunjukkan panel geser pada buka halaman

64 $script = ' $ Script = '

65 <script type="text/javascript"> <script type="text/javascript">

66 $(function(){ $ (Function () {

67 $("div#panel").show(); . $ ("Div # panel") menunjukkan ();

68 $("#toggle a").toggle(); . $ ("# Beralih a") beralih ();

69 }); });

70 </script>'; </ Script> ';


Kami menyimpan semua kesalahan yang ditemui dalam sebuah array $ err, yang kemudian diberikan ke sebuah variabel $ _SESSION. Hal ini memungkinkan untuk dapat diakses setelah browser redirect.

Anda mungkin telah melihat di beberapa situs, bahwa ketika Anda menyerahkan formulir dan kemudian refresh halaman, data dikirim seluruh lagi. Ini bisa menjadi masalah karena bisa menyebabkan pendaftaran ganda dan beban server yang tidak perlu.

Kami menggunakan fungsi header untuk mencegah hal ini, dengan mengarahkan browser ke halaman yang sama. Ini dimulai pandangan segar halaman, tanpa browser menghubungkannya dengan formulir kirimkan. Hasilnya adalah bahwa, pada refresh halaman, tidak ada data yang dikirim.

Tapi seperti kita menggunakan $ _SESSION untuk menyimpan semua kesalahan ditemui adalah penting bahwa kita tidak diset variabel-variabel ini, setelah kami menunjukkan kesalahan kepada pengguna. Jika tidak, mereka akan ditampilkan pada setiap tampilan halaman (garis disorot pada bagian XHTML dari tutorial).

Juga perhatikan bagaimana kita membuat sendiri skrip tambahan (baris 60-70 dari bagian kedua dari kode PHP) yang menunjukkan panel di buka halaman, sehingga pesan-pesan yang terlihat oleh pengguna.

Sekarang mari kita lihat di CSS.

Sistem registrasi / login

Langkah 4 - CSS

Panel geser datang dengan style sheet sendiri. Ini berarti kita hanya tersisa menciptakan gaya halaman.

demo.css

01

body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{ tubuh, h1, h2, h3, p, kutipan, kecil, bentuk, masukan, ul, li, ol, label {

02 /* The reset rules */ / * Aturan ulang * /

03 margin:0px; margin: 0px;

04 padding:0px; padding: 0px;


06

07body{ body {

08 color:#555555; color: # 555555;

09 font-size:13px; font-size: 13px;

10 background: #eeeeee; background: # eeeeee;

11

font-family:Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;

12 width: 100%; width: 100%;


14

15h1{ h1 {


17 font-weight:bold; font-weight: bold;

18

font-family:"Trebuchet MS",Arial, Helvetica, sans-serif; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

19 letter-spacing:1px; letter-spacing: 1px;


21

22h2{ h2 {

23

font-family:"Arial Narrow",Arial,Helvetica,sans-serif; font-family: "Arial Narrow", Arial, Helvetica, sans-serif;


25 font-weight:normal; font-weight: normal;

26 letter-spacing:1px; letter-spacing: 1px;

27 padding-left:2px; padding-left: 2px;

28 text-transform:uppercase; text-transform: uppercase;

29 white-space:nowrap; white-space: nowrap;

30 margin-top:4px; margin-top: 4px;

31 color:#888888; color: # 888888;

src-text" style="direction: ltr; text-align: left">} }

33

34#main p{ # Main p {

35 padding-bottom:8px; padding-bottom: 8px;


37

38.clear{ . Jelas {

39 clear:both; clear: both;


41

42#main{ # Main {

43 width:800px; width: 800px;

44

/* Centering it in the middle of the page */ / * Centering itu di tengah-tengah halaman * /

45

margin:60px auto; margin: 60px auto;


47

48.container{ . Kontainer {

49 margin-top:20px; margin-top: 20px;

50

class="google-src-text" style="direction: ltr; text-align: left">background:#FFFFFF; background: # FFFFFF;

52

border:1px solid #E0E0E0; border: 1px solid # E0E0E0;


54

55 /* Rounded corners */ / * Rounded sudut * /

56 -moz-border-radius:20px; -Moz-border-radius: 20px;

57 -khtml-border-radius: 20px; -KHTML-border-radius: 20px;

58 -webkit-border-radius: 20px; -Webkit-border-radius: 20px;

59 border-radius:20px; border-radius: 20px;


61

62.err{ . Err {

63 color:red; warna: merah;


65

66.success{ . Sukses {

67 color:#00CC00; color: # 00CC00;


69

70a, a:visited { a, a: visited {

71 color:#00BBFF; color: # 00BBFF;

72 text-decoration:none; text-decoration: none;

73 outline:none; outline: none;


75

76a:hover{ a: hover {

77 text-decoration:underline; text-decoration: underline;


79

80.tutorial-info{ . Tutorial-info {

81 text-align:center; text-align: center;



Langkah 5 - jQuery

Panel geser dilengkapi dengan file sendiri jQuery.

demo.php

01 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></

script> <script type="text/javascript"

src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> </ script>

02

03 <-! PNG FIX untuk IE6 ->

04

 <- Http://24ways.org/2007/supersleight-transparent-png-in-ie6 -!>

05 <[Endif] ->

08

09

<script src="login_panel/js/slide.js" type="text/javascript"></script> <script src="login_panel/js/slide.js" type="text/javascript"> </ script>

10

11

<?php echo $script; ?> <? Php echo $ naskah;?>

Pertama kita termasuk perpustakaan jQuery dari CDN Google. Kemudian datang memperbaiki khusus untuk isu-isu transparansi IE6 PNG dan terakhir script panel disertakan.

Di bagian bawah halaman adalah variabel skrip $ - itu menunjukkan panel di buka halaman jika diperlukan.

Dengan sistem ini keren kami masuk selesai!

Kesimpulan

Hari ini kita belajar bagaimana menggunakan komponen bentuk fantastis dan mengubahnya menjadi sebuah log fungsional dalam sistem / pendaftaran.

Anda bebas untuk dibangun di atas kode ini dan memodifikasi cara apapun yang Anda lihat cocok.

membuat sebuah sistem masuk keren dengan php, mysql & jquery

Documents