.
அறிமுகம்.
நாம் நம் இணைய பயன்பாட்ட்டை அணைவரும் அணுகாமல் அதை குறிப்பிட்ட
நபர்கள் மட்டும் அணுகுவதற்கு login சிஸ்டம் பயன்படுகின்றது.நாம் நம் பயனர் பெயர்(user
name) மற்றும் கடவுச்சொள்(password) கொடுத்து லாக் இன் செய்து கொள்ளலாம்.
இதற்கு
தேவைப்படுவன:
- HTML
- CSS
- PHP
- MySQL
- Xampp/Wamp server
Sign-In
வெப் பக்கம்.
முதலில் நாம் sign-in என்கின்ற இணைய பக்கத்தை உருவாக்க வேண்டும்.அதற்கான
கோடிங்க் கீழே கொடுக்கபட்டுள்ளது.
Listing 1: Sign-In.html
<!DOCTYPE HTML>
<html>
<head>
<title>Sign-In</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body id="body-color">
<div id="Sign-In">
<fieldset style="width:30%"><legend>LOG-IN HERE</legend>
<form method="POST" action="connectivity.php">
User <br><input type="text" name="user" size="40"><br>
Password <br><input type="password" name="pass" size="40"><br>
<input id="button" type="submit" name="submit" value="Log-In">
</form>
</fieldset>
</div>
</body>
</html>
கீழே உள்ள பட த்தில்
SIGN-IN
.HTML பற்றிய குறிப்பு:
இந்த
ஃபைலில் முதலில் ஒரு Fieldset பயன்படுத்துகின்றோம்.
அது
ஒரு கண்டைனராக செயற்படுகின்றது. அதன் வித் ஆக 30% என குறிப்பிட்டு இருக்கின்றோம்.
டேட்டாவானது சப்மிட் பட்டனை அழுத்திய பிறகு connectivity.php என்ற பக்கத்திற்கு
டேட்டா செல்ல வேண்டும். இரண்டு மெத்தடில் டேட்டா பாஸ் செய்யலாம் ஒன்று get
மற்றொன்று post. மற்றும் குறிப்பிட்டு சொல்லும் படி ஒரு விசயம் இன்புட் டைப்
password என்று கொடுத்திருக்கின்றோம். எனவே நாம் டைப் செய்யும் பொழுது கேரக்டர்
தோன்றாது அதற்கு பதில் டாட்ஸ் தோன்றும்.
Post
மற்றும் get மெத்தட் வித்தியாசம்:
Post மெத்தட் பாதுகாப்பானதாகும். Get மெத்தடில் டேட்டா பாஸ்
செய்யும் பொழுது டேட்டாவானது url(இணைய தள முகவரி) உடன் வெளிப்படுத்தப்படும் .
பாஸ்வேர்டு போன்ற பாதுகாப்பான டேட்டாக்கள் வெளிப்படுத்தப்படும். மேலும் url லெங்க்த்
255 யை தாண்டக்கூட்டது போன்ற கட்டுப்பாடுகள் உள்ளன.
Css பற்றிய குறிப்புகள்.
பார்போரை ஈர்க்கும் படியாய் இணைய பக்கங்களை வடிவமைப்பதற்கு
ஸ்டைல் ஷீட் உதவியாய் உள்ளது. இந்த பக்கத்திற்கான style.css கீழே உள்ளது
Stylecss
/*CSS File For Sign-In webpage*/
#body-color{
background-color:#6699CC;
}
#Sign-In{
margin-top:150px;
margin-bottom:150px;
margin-right:150px;
margin-left:450px;
border:3px solid #ff0000;
padding:9px 35px;
background:#6699CC;
width:400px;
border-radius:20px;
box-shadow: 7px 7px 6px;
}
#button{
border-radius:10px;
width:100px;
height:40px;
background:#ffff00;
font-weight:bold;
font-size:20px;
}
Description of style.css
மூன்று ஐடி பயன்படுத்தப்பட்டுள்ளது. ஒன்று பாடி ஐடி. அதன் பின்
பக்க நிறம் குறிப்பிடப்படுள்ளது. மற்றொன்று டிவ் டேக் ஐடி. மற்றொன்று பட்டன் ஐடி.
மூன்றுக்கும் உரிய டிசைன்களும் குறிப்பிடப்படுள்ளன.
Figure 3: Sign-in
webpage after applying CSS Style (linking the style.css webpage)
Using
PHP and MySQL to get Log In user Profile page: முதலில் ஒரு டேட்டா பேஸ் உருவாக்க
வேண்டும். பிறகு UserName என்ற பெயரில் டேபிள் உருவாக்கவும்.
Listing 4: creating
table
CREATE TABLE UserName
(
UserNameID int(9) NOT
NULL auto_increment,
userName VARCHAR(40)
NOT NULL,
pass VARCHAR(40) NOT
NULL,
PRIMARY
KEY(UserNameID)
);
மேலே
உள்ளவாறு டேபிள் உருவாக்கவும். பிறகு கீழே உள்ளவாறு டேட்டா இன்செர்ட் செய்யப்பட வேண்டும்.
Listing 5:
Inserting data to the table UserName:
INSERT INTO
UserName (userName,
pass)
VALUES
("muthu","karthi");
Listing 6:
connectivity.php
<?php
define('DB_HOST', 'localhost');
define('DB_NAME', 'practice');
define('DB_USER','root');
define('DB_PASSWORD','');
$con=mysql_connect(DB_HOST,DB_USER,DB_PASSWORD)
or die("Failed to connect to MySQL: " . mysql_error());
$db=mysql_select_db(DB_NAME,$con) or die("Failed to connect to MySQL: " . mysql_error());
/*
$ID = $_POST['user'];
$Password = $_POST['pass'];
*/
function SignIn()
{
session_start(); //starting
the session for user profile page
if(!empty($_POST['user'])) //checking
the 'user' name which is from Sign-In.html, is it empty or have some text
{
$query = mysql_query("SELECT * FROM UserName where userName = '$_POST[user]' AND pass = '$_POST[pass]'") or die(mysql_error());
$row = mysql_fetch_array($query) or die(mysql_error());
if(!empty($row['userName']) AND !empty($row['pass']))
{
$_SESSION['userName'] = $row['pass'];
echo "SUCCESSFULLY LOGIN TO USER PROFILE PAGE...";
}
else
{
echo "SORRY... YOU ENTERD WRONG ID AND PASSWORD...
PLEASE RETRY...";
}
}
}
if(isset($_POST['submit']))
{
SignIn();
}
?>
சரியான யூசர்னேம், பாஸ்வேர்டு கொடுக்கப்பட்டால் கீழே உள்ள விண்டோ
தோன்றும்.
Connectivity.php
இதில் செலெக்ட்
கொரி பயன்படுத்தப்பட்டுள்ளது. குறிப்பிட்ட username, pass கொடுக்கப்பட்டால்
அடுத்தப் பக்கதிற்கு செல்லும். Where பகுதியில்
நாம் html form ஆனதில் என்ன யூசர்நேம் மற்றும் பாஸ்வேர்டு கொடுக்கின்றோமோ அந்த
டேட்டா மேட்ச் செய்யப்பட்டு ரோ ஆனது சேமிக்கப்படுகின்றது. அந்த ரோவில் உள்ள
யூசர்நேம் ,பாஸ்வேர்டு ஆனவை நம் ஃபார்மில் உள்ள யூசர்நேம், பாஸ்வேர்டுடன் மேட்ச்
ஆனால் நாம் அடுத்த பக்கத்திற்கு செல்கின்றோம்.
நன்றி
முத்து கார்த்திகேயன்,மதுரை.
No comments:
Post a Comment