May 2013 ~ WEB LESSONS

Thursday, May 23, 2013

PHP Login System

May 23, 2013 31 comments

Login is a very important part of any website, from securing contents from prying eyes to tracking visitors on your website. This tutorial is a simple login form for a website.

Firstly you create "login.php" like this

Code:

<?php
session_start();

// This starts the session which is like a cookie,

but it isn't saved on your hdd and is much more secure.

mysql_connect("localhost","DATABASE USER HERE","PASSWORD");

// Connect to the MySQL server

mysql_select_db("login");

// Select your Database

if(isset($_SESSION['loggedin']))
{
die("You are already logged in!");

// That bit of code checks if you are logged in or not,

and if you are logged, you can't log in again!

}

if(isset($_POST['submit']))
{
$name = mysql_real_escape_string($_POST['username']);

// The function mysql_real_escape_string() stops hackers!

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

$mysql = mysql_query("SELECT * FROM users WHERE name = '{$name}'

AND password = '{$pass}'");

//get all users in the database with that username and password.

if(mysql_num_rows($mysql) < 1)
   {
     die("Password was probably incorrect!");
   }

//check number of rows the MySQL query was less than 1,

so if it couldn't find a row,

the password is incorrect or the user doesn't exist!

$_SESSION['loggedin'] = "YES";

// Set it so the user is logged in!

$_SESSION['name'] = $name;

// Make it so the username can be called by $_SESSION['name']

die("You are now logged in!");

// it doesn't show the login form after you are logged in!

}

echo "<form type='login.php' method='POST'>

Username: <br>
<input type='text' name='username'><br>
Password: <br>
<input type='password' name='password'><br>
<input type='submit' name='submit' value='Login'>
</form>";

//the form to enter your password and username to login.

After you have put that code, run this query on your database:

Code:


CREATE TABLE `users` (
`id` BIGINT( 60 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`name` VARCHAR( 50 ) NOT NULL ,
`password` VARCHAR( 32 ) NOT NULL ,
`date` INT( 32 ) NOT NULL ,
`email` VARCHAR( 80 ) NOT NULL
);

And then add all of the users you wish to the table!
--------------
To integrate this within your site, you can do the following at the top of your site.
This Code Like Lock.php or This Code Using to Lock Your Webpages

Code:

<?php
session_start(); // NEVER forget this!
if(!isset($_SESSION['loggedin']))
{
    die("To access this page, you need to <a href='login.php'>LOGIN</a> "); 

// Make sure they are logged in!
} 
// What the !isset() code does, is check to see if the variable $_SESSION['loggedin'] is there, and if it isn't it kills the script telling the user to log in!
?>

If you want display your user name on your site use this code:
Code

<?php echo "Hello there, {$_SESSION['name']}! Welcome to my site!"; ?>

Logout.php:
Code

<?php
session_start();
if(isset($_SESSION['name']))
  unset($_SESSION['loggedin']);
  header('Location: index.php');
?>
or
<?php
    session_start();
    $_SESSION = array();
    session_destroy();
?>

Accessing form elements by name with jQuery

May 14, 2013 No comments

There are a variety of ways to access elements with jQuery including by the name property of form elements (the name="" part of <input name="foo">). This can be useful so you don't have to assign an id to each and every form element as well as a name which is needed to pass the form value to the next page.

Example form

Here's a snippet of a form for the following examples with first_name and last_name fields in a form.

<form ... >
    ....
    <input type="text" name="first_name" value="" />
    <input type="text" name="last_name" value="" />
    ....
</form>

Selecting by name

To select the "first_name" text input form element do this:

$("input[name=first_name]");

For example to display the value in an alert window do this:

alert( $("input[name=first_name]").val() );

Source : http://www.electrictoolbox.com/jquery-form-elements-by-name/

jQuery Awesome Datepicker / formatDate

May 08, 2013 No comments

Example :

<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#my_date" ).datepicker({
dateFormat: "MM/dd/yy",
defaultDate: "January/01/1970",
minDate: "January/01/1925",
maxDate: "December/31/2011",
changeMonth: true,
changeYear: true,
yearRange: "1925:2011",
onClose: function(dateText, inst) {
var validDate = $.datepicker.formatDate( "MM/dd/yy", $('#my_date').datepicker('getDate'));
$('#my_date').datepicker('setDate', validDate);
}
});
});
</script>
</head>
<body>
<input name="my_date" id="my_date" type="text" value="January/01/1970" />
</body>
</html>

Twitter Style(glow) Textbox Using Css3

May 07, 2013 No comments

<html>
<head>
<style type="text/css">
.inputbox{
border-radius:5px;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
padding: 3px 0px 3px 3px;
border: 1px solid #999;
}
.inputbox:focus{
background-color:#FFF;
border: 1px solid #07c;
box-shadow: 0 0 10px #07c;
}
</style>
</head>
<body>
<input name="fname" type="text" class="inputbox" value="twitter">
</body>
</html>

Example :

PHP MySQL Update Using Forms

May 06, 2013 No comments

<DOCTYPE html>
<html>
<head>
</head>
<body>

<?php
$con=mysqli_connect("localhost","abc","abc456","mydb");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

$newname = mysql_real_escape_string( $_POST["fname"] );

if (isset($_POST['submit'])) {

mysqli_query($con,"UPDATE users SET firstname = '$newname'
WHERE id=3");

header('Location: index.php');
}

mysqli_close($con);

?>

<form name="profedit" action="" method="post">
<br>First Name :<input readonly type="text" class="input" name="fname" border="3px" value=" <?php echo"$display"; ?> ">
<br>
<input type="button" id="btnsubmit" value="edit">
<input type="submit" value="Submit" name="submit" id="save" />
<br>
</form>
</body>
</html>

php jquery profile edting

May 06, 2013 No comments

<DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>

$(document).ready(function(){
$("#save").click(function(){
$("input").attr("readonly", true);
$("input#input").removeAttr('id');
$(".input").attr('id', 'aftersave');
});
});

$(document).ready(function(){
$("#btnsubmit").click(function(){
$("input").attr("readonly", false);
$(".input").attr('id', 'input');

});
});
</script>
<style type="text/css">
.input{
border:solid 0px;
}
#input{
border:solid 2px #00F;
}
#aftersave{
border:solid 0px #000;
}

</style>
</head>
<body>

<?php
$con=mysqli_connect("localhost","admin","abc123","mydb");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$result = mysqli_query($con,"SELECT * FROM users");

while($row = mysqli_fetch_array($result))
{
$display = $row['firstname'];
}

$newname = mysql_real_escape_string( $_POST["fname"] );

if (isset($_POST['submit'])) {

mysqli_query($con,"UPDATE users SET firstname = '$newname'
WHERE id=3");

header('Location: index.php');
}

mysqli_close($con);

?>

<form name="profedit" action="" method="post">
<br>First Name :<input readonly type="text" class="input" name="fname" border="3px" value=" <?php echo"$display"; ?> ">
<br>
<input type="button" id="btnsubmit" value="edit">
<input type="submit" value="Submit" name="submit" id="save" />
<br>
</form>

</body>
</html>

After submit

Retrieve data from a table || Get value from database php

May 06, 2013 No comments

<?php

$con=mysqli_connect("localhost","admin","abc123","mydb");

// Check connection

if (mysqli_connect_errno())

{

echo "Failed to connect to MySQL: " . mysqli_connect_error();

}

$result = mysqli_query($con,"SELECT * FROM users");

while($row = mysqli_fetch_array($result))

{

$display = $row['firstname'];

echo"$display";

}

mysqli_close($con);

Add Remove Attributes - jQuery

May 02, 2013 No comments

Add new id

$(element).attr('id', 'newID');

remove id

$('img#thumb').removeAttr('id');

Example :

<html>

<head>

</script>

$(document).ready(function(){

$("#save").click(function(){

$("input").attr("readonly", true);

$("input#input").removeAttr('id');

$(".input").attr('id', 'aftersave');

});

$(document).ready(function(){

$("#btnsubmit").click(function(){

$("input").attr("readonly", false);

$(".input").attr('id', 'input');

});

</script>

#input{

border:solid 2px #00F;

}

#aftersave{

border:solid 0px #000;

}

#save{

background:#CFC;

}

</style>

</head>

<body>

<p>Simple button function</p>

<br>

</body>

</html>

WEB LESSONS

Thursday, May 23, 2013

PHP Login System

Tuesday, May 14, 2013

Accessing form elements by name with jQuery

Wednesday, May 8, 2013

jQuery Awesome Datepicker / formatDate

Tuesday, May 7, 2013

Twitter Style(glow) Textbox Using Css3

Monday, May 6, 2013

PHP MySQL Update Using Forms

php jquery profile edting

Retrieve data from a table || Get value from database php

Thursday, May 2, 2013

Add Remove Attributes - jQuery

Labels

Popular Posts

Blog Archive