2013 ~ WEB LESSONS

Wednesday, November 13, 2013

Display text from database with read more link

July 26, 2013 No comments

Display text from database with read more link

Retrieve data from a table

Address book

1st we create two files list.php, person.php with the following code:

Code for list.php

<html>
 <body>
 <ul>
 <?php
 mysql_connect("localhost", "admin", "abc123") or die (mysql_error ());
 mysql_select_db("mydb") or die(mysql_error());
 $rs = mysql_query('SELECT * FROM mytable');
while($result = mysql_fetch_array($rs)){ 

   echo $result['firstname'];
   echo $result['lastname'];
echo "<a href='person.php?id=".$result['id']."'> More... </a>";
echo"<br>";
}
 mysql_close();
 ?>
 </ul>
 </body>
 </html>

code for person.php

<html>
 <body>
 <dl>
 <?php
 mysql_connect("localhost", "admin", "abc123") or die (mysql_error ());
 mysql_select_db("mydb") or die(mysql_error());
 
 $strSQL = "SELECT * FROM mytable WHERE ID=" . $_GET["id"];
 $rs = mysql_query($strSQL);
 
 // Loop the recordset $rs
 while($row = mysql_fetch_array($rs)) {

  // Write the data of the person
  echo "<dt>Name:</dt><dd>" . $row["firstname"] . " " . $row["lastname"] . "</dd>";
  echo "<dt>Phone:</dt><dd>" . $row["Contactno"] . "</dd>";
  echo "<dt>Birthdate:</dt><dd>" . $row["dateofbirth"] . "</dd>";
 }
 mysql_close();
 ?>
 </dl>
 <p><a href="list.php">Return to the list</a></p>
 </body>
 </html>

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>

Submitting a date to Database from datepicker || PHP mysql insert date format

April 30, 2013 No comments

$date = mysql_real_escape_string($_POST['date']);

$new_date = date('Y-m-d',strtotime($date));

$sql="INSERT INTO some_table (date)

VALUES

('$new_date')";

Example 2

//get the correct format

$new_date = date('Y-m-d',strtotime($_POST['date']));

//then you can insert that date

$insert = 'INSERT INTO some_table (field1) VALUES("'.mysql_real_escape_string($new_date).'")';

php check if record already exists

April 23, 2013 No comments

<?php

mysql_connect('localhost', 'admin', 'abc456');

mysql_select_db('web');

if (mysqli_connect_errno())

{

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

}

<?php

$suid = $_SESSION['userid'];

$check = mysql_query("SELECT id FROM arts WHERE id = '$suid'");

$chid = mysql_fetch_array( $check );

if ($chid == true)

{

header('Location: userprofile.php');

}

else {

header('Location: edit-profile.php');

}

jquery ajax form submit loading image

April 22, 2013 No comments

1. Insert this code below head tag

</script>

2. And Form code change like this

</form>

Example:

<html>

<head>

</script>

</head>

<body>

<br>

<label>username:</label><input name="name" type="text"><br>

<label>password:</label><input name="password" type="password"><br>

<label>email:</label><input name="email" type="text"><br>

</form>

</body>

</html>

Ajax loader images

WEB LESSONS

Wednesday, November 13, 2013

Create Awesome Loginbox

Tuesday, September 3, 2013

Simple jQuery form validation

Friday, July 26, 2013

Display text from database with read more link

Display text from database with read more link

Retrieve data from a table

Address book

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

Tuesday, April 30, 2013

Submitting a date to Database from datepicker || PHP mysql insert date format

Tuesday, April 23, 2013

php check if record already exists

Monday, April 22, 2013

jquery ajax form submit loading image

Labels

Popular Posts

Blog Archive