Bootstrap
Showing posts with label Bootstrap. Show all posts
Showing posts with label Bootstrap. Show all posts

How To Display Data From Database Using Bootstrap Responsive Table With Pagination

Unknown 11:11 PM Add Comment
Unknown
This video learn how to display data from database using bootstrap responsive table with pagination.

Before you start learn with me you have bootstrap

 step 1

 Go to download bootstrap from www.getbootstrap.com

 step 2

 Go to XAMPP and then create web project with display pagination

 step 3

 Extract bootstrap zip file to c:/xampp/htdocs/websitebootstrap/

 step 4

 Go to phpmyadmin and then create database name "maps"
CREATE DATABASE maps;

 and then create table "markers"

 CREATE TABLE `markers` (
  `id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
  `name` VARCHAR( 60 ) NOT NULL ,
  `address` VARCHAR( 80 ) NOT NULL ,
  `lat` FLOAT( 10, 6 ) NOT NULL ,
  `lng` FLOAT( 10, 6 ) NOT NULL ,
  `type` VARCHAR( 30 ) NOT NULL
) ENGINE = MYISAM ;

 and then insert data

 INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Pan Africa Market', '1521 1st Ave, Seattle, WA', '47.608941', '-122.340145', 'restaurant');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Buddha Thai & Bar', '2222 2nd Ave, Seattle, WA', '47.613591', '-122.344394', 'bar');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('The Melting Pot', '14 Mercer St, Seattle, WA', '47.624562', '-122.356442', 'restaurant');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Ipanema Grill', '1225 1st Ave, Seattle, WA', '47.606366', '-122.337656', 'restaurant');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Sake House', '2230 1st Ave, Seattle, WA', '47.612825', '-122.34567', 'bar');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Crab Pot', '1301 Alaskan Way, Seattle, WA', '47.605961', '-122.34036', 'restaurant');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Mama\'s Mexican Kitchen', '2234 2nd Ave, Seattle, WA', '47.613975', '-122.345467', 'bar');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Wingdome', '1416 E Olive Way, Seattle, WA', '47.617215', '-122.326584', 'bar');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Piroshky Piroshky', '1908 Pike pl, Seattle, WA', '47.610127', '-122.342838', 'restaurant');

 and then write php codes for connect to database

config.php

 <?php
$mysql_hostname = "localhost";
$mysql_user = "root";
$mysql_password = "";
$mysql_database = "maps";

 $bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Opps some thing went wrong");
mysql_select_db($mysql_database, $bd) or die("Opps some thing went wrong");

?>

 and then create index.php

 <?php

 include('includes/config.php');

 $per_page = 5;
$adjacents = 5; 

 $pages_query = mysql_query("SELECT COUNT(id), name, address, lat, lng, type FROM markers") or die(mysql_error());

 //get total number of pages to be shown from  total result
$pages = ceil(mysql_result($pages_query, 0) / $per_page);

 //get current page from URL ,if not present set it to 1
$page = (isset($_GET['page'])) ? (int)$_GET['page'] : 1 ;

 //calculate actual start page with respect to Mysql 
$start = ($page - 1) * $per_page;

 //execute a mysql query to retrieve  all result from current page by using LIMIT keyword in mysql
//if  query  fails stop further execution and show mysql error

 $query = mysql_query("SELECT id, name, address, lat, lng, type FROM markers LIMIT $start, $per_page") or die(mysql_error());

 $pagination="Pagination";
//if current page is first show first only else reduce 1 by current page
$Prev_Page = ($page==1)?1:$page - 1;

 //if current page is last show last  only else add  1 to  current page
$Next_Page = ($page>=$pages)?$page:$page + 1;

//if we are not on first page show first link
if($page!=1) $pagination.= '<a href="?page=1">First</a>';
//if we are not on first page show previous link
if($page!=1) $pagination.='<a href="?page='.$Prev_Page.'">Previous</a>';

 //we are going to display 5 links on pagination bar
$numberoflinks=5;

 //find the number of links to show on right of current page
$upage=ceil(($page)/$numberoflinks)*$numberoflinks;
//find the number of links to show on left of current page
$lpage=floor(($page)/$numberoflinks)*$numberoflinks;
//if  number of links on left of current page are zero we start from 1
$lpage=($lpage==0)?1:$lpage;
//find the number of links to show on right of current page and make sure it must be less than total number of pages
$upage=($lpage==$upage)?$upage+$numberoflinks:$upage;
if($upage>$pages)$upage=($pages-1);
//start building links from left to right of current page
for($x=$lpage; $x<=$upage; $x++){
//if current building link is current page we don't show link,we show as text else we show as linkn
$pagination.=($x == $page) ? ' <strong>'.$x.'</strong>' : ' <a href="?page='.$x.'">'.$x.'</a>' ;
}
//we show next link and last link if user doesn't on last page
if($page!=$pages) $pagination.=  '  <a href="?page='.$Next_Page.'">Next</a>';
if($page!=$pages) $pagination.=  ' <a href="?page='.$pages.'">Last</a>';
?>

<!DOCTYPE html>
<html lang="en">

<head>
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>How To Display Data From Database Using Bootstrap Responsive Table With Pagination
</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

<div class="container-fluid">
<h3>Display Location Address</h3>
<div class="table-responsive">
 <table class="table">
   <tr>
    <th>Location</th>
    <th>Address</th>
    <th>Latitude</th>
    <th>Longtitude</th>
    <th>Type</th>
   </tr>
   <?php
while($row = mysql_fetch_array($query))
{
$f1 = $row['name'];
$f2 = $row['address'];
$f3 = $row['lat'];
$f4 = $row['lng'];
$f5 = $row['type'];
?>
<tr>
<td><?php echo $f1 ?></td>
<td><?php echo $f2 ?></td>
<td><?php echo $f3 ?></td>
<td><?php echo $f4 ?></td>
<td><?php echo $f5 ?></td>
</tr>
<?php
} //while
?>
 </table>
</div>
<nav>
 <ul class="pager">
   <li><a href="#"><?php echo $pagination; ?></a></li>    
 </ul>
</nav>
</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>

</body>

PHP-MySQL Login Using Bootstrap

Unknown 4:04 AM 1 Comment
Unknown
This video learn about PHP-MySQL Login Using Bootstrap

1- Create Database "bootstrap" and then create table

 CREATE TABLE tbl_users

 - userid
- username
- password

 2- Insert New Row

 INSERT INTO tbl_users(username,password) VALUES('demo@gmail.com',md5('test'));

 3- Download Bootstrap

4- Write PHP-MySQL codes for login

 Create web directory name or web root 'clogin'

 Extract bootstrap with css, js, fonts to clogin

 Create folder includes in web root

 config.php (Save to includes)

 <?php
$mysql_hostname = "localhost";
$mysql_user = "root";
$mysql_password = "";
$mysql_database = "bootstrap";

 $bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Opps some thing went wrong");
mysql_select_db($mysql_database, $bd) or die("Opps some thing went wrong");
?>

 index.php (Save to web root)

 <?php
header("location: login.php");
?>

 login.php (Save to web root)

 <?php
session_start();
include("includes/config.php");

 if($_SERVER["REQUEST_METHOD"] == "POST")
{
// username and password sent from form 
$myusername = addslashes($_POST['username']); 
$mypassword = md5(addslashes($_POST['password']));

 $sql = "SELECT userid FROM tbl_users WHERE username='$myusername' and password='$mypassword'";
$result = mysql_query($sql);
$count = mysql_num_rows($result);

 // If result matched $myusername and $mypassword, table row must be 1 row
if($count == 1){
//session_register("myusername");
$_SESSION['login_admin']=$myusername;
header("location: http://localhost/clogin/admin/");
}
}
?>

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="">

     <title>PHP-MySQL Login Using Bootstrap</title>

     <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

     <!-- Custom styles for this template -->
    <link href="css/signin.css" rel="stylesheet">
</head>

 <body>

 <div class="container">

       <form class="form-signin" method="post">
        <h2 class="form-signin-heading">Login</h2>
        <label for="inputEmail" class="sr-only">Email address</label>
        <input name="username" type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
        <label for="inputPassword" class="sr-only">Password</label>
        <input name="password" type="password" id="inputPassword" class="form-control" placeholder="Password" required>
        <div class="checkbox">
          <label>
            <input type="checkbox" value="remember-me"> Remember me
          </label>
        </div>
        <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>        
      </form>

 </div> <!-- /container -->
</body>
</html>

 logout.php (Save to Web root)

 <?php
session_start();
if(session_destroy())
{
header("Location: index.php");
}
?>

 Create folder admin in web root

 index.php (Save to admin)
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

     <title>Dashboard Bootstrap</title>

     <!-- Bootstrap core CSS -->
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <style>
    body {
  padding-top: 50px;
}
.starter-template {
 padding: 40px 15px;
 text-align: center;
}
    </style>
  </head>

   <body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Dashboard</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li><a href="../logout.php">Log Out</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

     <div class="container">

       <div class="starter-template">
        <h1>Dashboard</h1>
        <p class="lead">
        Dashboard page is under construction
        </p>
      </div>

     </div><!-- /.container -->
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
  </body>
</html>

 Demo
http://downloads.ziddu.com/download/24380544/clogin.zip.html

Read more blog
http://www.freeonlinelecture.com

Follow Us with Facebook
https://www.facebook.com/pages/PHP-Tutorial/782239958529506

Bootstrap Tutorial: How To Create Website Using CodeIgniter and Bootstrap

Unknown 1:03 AM Add Comment
Unknown
This video learn how to create website using CodeIgniter and Bootstrap

Learn CodeIgniter

CodeIgniter is a powerful PHP framework with a very small footprint, built for developers who need a simple and elegant toolkit to create full-featured web applications. Read more

Learn Bootstrap

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. Read more

Bootstrap Tutorial: How To Create Website Using Bootstrap

Unknown 3:09 AM Add Comment
Unknown
This video learn how to create website using Bootstrap

Learn Bootstrap

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. Read more

 Demo


Subscribe to: Posts (Atom)