Tampilkan postingan dengan label bootstrap. Tampilkan semua postingan

Membuat sistem Notifikasi Menggunakan PHP, AJAX dan Bootstrap

Pada kesempatan ini kita akan membahas tentang sistem notifikasi dengan menggunakan PHP, AJAX dan Bootstrap, sistem notifikasi ini bisa anda terapkan pada aplikasi / projek anda.



 langsung saja untuk membuatnya seperti biasa buat dulu html nya seperti berikut:
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Popup Notification Like Facebook using PHP AJAX Bootstrap</title>

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" charset="utf-8"></script>

<style media="screen">

        #alert-popover

        {

        display: block;

        position: absolute;

        bottom: 50px;

        left: 50px;

        }

        .wrapper

        {

        display: table-cell;

        vertical-align: bottom;

        height: auto;

        width: 200px;

        }

        .alert-default

      {

              color: #333333;

              background: #f2f2f2;

              border-color: #cccccc;

              }

</style>

</head>

<body>

<br/><br/>

<div class="container">

<br>

<h2>Facebook Style Notification Using PHP Ajax & Bootstrap</h2>

<br>

<!-- Form  -->

<form id="comment_form" method="post">

<div class="form-group">

<label>Enter Subject</label>

<input type="text" name="subject" id="subject" class="form-control"/>

</div>

<div class="form-group">

<label>Enter Comment</label>

<textarea name="comment" id="comment" class="form-control"></textarea>

</div>

<div class="form-group">

<input type="submit" name="post" id="post" class="btn btn-info" value="Post"/>

</div>

</form>

<!-- Form berakhir disini  -->



<div id="alert-popover">

<div class="wrapper">

<div class="content">



</div>

</div>

</div>

</div>

</body>

</html>



<script>

  $(document).ready(function(){



          setInterval(function(){

          load_last_notification();

          }, 10000);



          function load_last_notification()

          {

          $.ajax({

          url:"fetch.php",

          method:"POST",

          success:function(data)

          {

          $('.content').html(data);

          }

          })

          }



          $('#comment_form').on('submit', function(event){

          event.preventDefault();

          if ($('#subject').val() != '' && $('#comment').val() != '')

          {

          var form_data = $(this).serialize();

          $.ajax({

          url:"insert.php",

          method:"POST",

          data:form_data,

          success:function(data)

          {

          $('#comment_form')[0].reset();

          }

          })

          }

          else

          {

          alert("Both Fields are Required");

          }

          });

          });

</script>

kemudian buat file PHP untuk menyimpan datanya seperti berikut:
<?php



        //insert

        if (isset($_POST["subject"]))

        {

        $connect = mysqli_connect("localhost", "root", "", "notification");

        $subject = mysqli_real_escape_string($connect, $_POST["subject"]);

        $comment = mysqli_real_escape_string($connect, $_POST["comment"]);



        $query = "INSERT INTO comments(comment_subject, comment_text) VALUES ('$subject', '$comment')";

        mysqli_query($connect, $query);

}

lalu buat lagi file php untuk mengambil datanya, file ini yang akan menampilkan notifikasinya dalam bentuk alert dialog:
<?php

    error_reporting(0);



//

$connect = mysqli_connect("localhost", "root", "", "notification");

        $query = "SELECT * FROM comments WHERE comment_status = 0 ORDER BY comment_id DESC";

        $result = mysqli_query($connect, $query);



        while ($row = mysqli_fetch_array($result))

        {

        $output .= '

<div class="alert alert-default">

<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>

<p><strong>'.$row["comment_subject"].'</strong>

<small><em>'.$row["comment_text"].'</em></small>

</p>

</div>

        ';

        }



        $update_query = "UPDATE comments SET comment_status = 1 WHERE comment_status = 0";

        mysqli_query($connect, $update_query);

        echo $output;

terakhir untuk tabel databasenya seperti berikut:
-- phpMyAdmin SQL Dump
        -- version 4.5.1
        -- http://www.phpmyadmin.net
        --
        -- Host: 127.0.0.1
        -- Generation Time: 26 Sep 2017 pada 00.17
        -- Versi Server: 10.1.16-MariaDB
        -- PHP Version: 5.6.24

        SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
        SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

        --
        -- Database: `notification`
        --

        -- --------------------------------------------------------

        --
        -- Struktur dari tabel `comments`
        --

        CREATE TABLE `comments` (
        `comment_id` int(11) NOT NULL,
        `comment_subject` varchar(100) NOT NULL,
        `comment_text` varchar(255) NOT NULL,
        `comment_status` int(1) NOT NULL DEFAULT '0'
        ) ENGINE=MyISAM DEFAULT CHARSET=latin1;

        --
        -- Dumping data untuk tabel `comments`
        --

        INSERT INTO `comments` (`comment_id`, `comment_subject`, `comment_text`, `comment_status`) VALUES
        (1, 'peter send you a message', 'hello friend, how are you?', 1),
        (2, 'hello friend, how are you?', 'hhhi', 1),
        (3, 'hi', 'hello', 1),
        (4, 'hi', 'hi', 1),
        (5, 'peter parker send you a message', 'hi jhon ', 1),
        (6, 'you have a friend request from jhon', 'jhon: do you a friend', 1),
        (7, 'parker send you a message', 'Nice to meet you', 1);

        --
        -- Indexes for dumped tables
        --

        --
        -- Indexes for table `comments`
        --
        ALTER TABLE `comments`
        ADD PRIMARY KEY (`comment_id`);

        --
        -- AUTO_INCREMENT for dumped tables
        --

        --
        -- AUTO_INCREMENT for table `comments`
        --
        ALTER TABLE `comments`
        MODIFY `comment_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=8;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;


silakan jalankan program anda jika ada yng kurang jelas silakan ditanyakan, jika artikel ini bermanfaat silkan di share, anda juga bisa melihat demo notifikasi ini pada tautan di bawah. terimakasih sudah mampir ke blog kami.

Lihat Demo
Read More

Membuat Tags dengan PHP, AJAX dan Bootstrap Tokenfield

Pernahkah anda melihat tags di blog atau website? Bagaimanakah cara membuatnya, kali ini kita akan membuat sistem tags dengan plugin bootstrap tokenfield, kemudian menyimpan datanya ke database dengan PHP dan AJAX.



 langkah pertama kita buat dulu HTMLnya:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Multiple Bootstrap Tags with PHP and AJAX</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" charset="utf-8"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" charset="utf-8"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/bootstrap-tokenfield.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/bootstrap-tokenfield.min.js" charset="utf-8"></script>
</head>
<body>
<br>
<div class="container">
<div class="row">
<h2 align="center">Insert Bootstrap tokenfield data using PHP AJAX</h2>
<br>
<div class="col-md-6" style="margin:0 auto;float:none">
<!-- pesan suksess -->
<span id="success_message"></span>
<!-- form -->
<form method="post" id="programmer_form">
<div class="form-group">
<label>Enter Name</label>
<input type="text" name="name" id="name" class="form-control">
</div>
<div class="form-group">
<label>Enter your Skill</label>
<input type="text" name="skill" id="skill" class="form-control">
</div>
<div class="form-group">
<input type="submit" name="submit" id="submit" value="Submit" class="btn btn-info">
</div>
</form>
</div>
</div>
</div>
</body>
</html>

<script type="text/javascript">

        $(document).ready(function(){

        $('#skill').tokenfield({
        autocomplete: {
        source: ['PHP', 'Code Igniter', 'Ajax', 'JQuery', 'laravel', 'slim', 'mongo db', 'html', 'Bootstrap',
        'css', 'javascript', 'JSON', 'angular js', 'node js', 'express js', 'socket.io', 'symphony',
        'yii', 'mysql', 'oracle', 'xml', 'android', 'java', 'ember', 'cake php', 'git', 'Zend', 'Phalcon'],
        delay: 100
        },
        showAutocompleteOnFocus: true
        });

        $('#programmer_form').on('submit', function(event){
        event.preventDefault();
        if ($.trim($('#name').val()).length == 0)
        {
        alert("Please enter your name");
        return false;
        }
        else if ($.trim($('#skill').val()).length == 0)
        {
        alert("Please enter your skill");
        return false;
        }
        else
        {
        var form_data = $(this).serialize();
        $('#submit').attr("disabled", "disabled");
        $.ajax({
        url:"insert.php",
        method:"POST",
        data:form_data,
        // untuk progress dialog atau loading
        beforeSend:function(){
        $('#submit').val('Submiting...');
        },
        // ketika suksess
        success:function(data){
        // jika data tidak kosong
        if (data != '')
        {
        // kosongkan input nama
        $('#name').val('');
        $('#skill').tokenfield('setTokens',[]);
        $('#success_message').html(data);
        $('#submit').attr("disabled", false);
        $('#submit').val('Submit');
        }
        }
        });
        setInterval(function(){
        $('#success_message').html('');
        }, 5000);
        }
        });

        });

</script>

kemudian untuk kode PHP nya seperti dibawah:
<?php



// insert data

        if (isset($_POST["name"]))

        {

        $connect = new PDO("mysql:host=localhost;dbname=tag","root","");

        $query = "INSERT INTO programmer(name, skill) VALUES (:name, :skill)";

        $statement = $connect->prepare($query);

        $statement->execute(

        array(

        ':name'  => $_POST["name"],

        ':skill' => $_POST["skill"]

        )

        );

        $result = $statement->fetchAll();

        $output = '';

        if (isset($result))

        {

        $output = '

<div class="alert alert-success">

        Your data has been successfully saved to system

</div>

        ';

        }

        echo $output;

}

dan untuk tabel databasenya seperti ini:
-- phpMyAdmin SQL Dump

        -- version 4.5.1

        -- http://www.phpmyadmin.net

        --

        -- Host: 127.0.0.1

        -- Generation Time: 25 Sep 2017 pada 23.47

        -- Versi Server: 10.1.16-MariaDB

        -- PHP Version: 5.6.24



        SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";

        SET time_zone = "+00:00";





/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;

/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;

/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;

/*!40101 SET NAMES utf8mb4 */;



        --

        -- Database: `tag`

        --



        -- --------------------------------------------------------



        --

        -- Struktur dari tabel `programmer`

        --



        CREATE TABLE `programmer` (

        `id` int(11) NOT NULL,

        `name` varchar(255) NOT NULL,

        `skill` text NOT NULL

        ) ENGINE=MyISAM DEFAULT CHARSET=latin1;



        --

        -- Dumping data untuk tabel `programmer`

        --



        INSERT INTO `programmer` (`id`, `name`, `skill`) VALUES

        (1, 'Jhon Smith', 'PHP, Ajax, JQuery, css'),

        (2, 'Marina', 'Phalcon, Bootstrap, mongo db, angular js');



        --

        -- Indexes for dumped tables

        --



        --

        -- Indexes for table `programmer`

        --

        ALTER TABLE `programmer`

        ADD PRIMARY KEY (`id`);



        --

        -- AUTO_INCREMENT for dumped tables

        --



        --

        -- AUTO_INCREMENT for table `programmer`

        --

        ALTER TABLE `programmer`

        MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=3;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;

/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;

/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;


Silakan Jalankan Program anda, bila ada yang kurang jelas atau ada yang ditanyakan silakan tinggalkan komentar dibawah, terimakasih sudah berkunjung ke blog kami, jika artikel ini bermanfaat silakan di share

Lihat Demo
Read More

Cara Membuat Layout di bootstrap

Baiklah kita kali ini akan membuat layout web dengan menggunakan bootstrap, bootstrap merupakan framework css yang paling banyak digunakan saat ini karena tampilanya yang sangat menarik. bootstrap pertama kali diperkenalkan pada tahun 2011 oleh Mark Otto untuk twitter. framework ini menggabungkan html, css dan javascript jadi anda tidak usah ribet lagi mengatur css dan javascriptnya cukup dengan html dengan memanfaatkan class yang ada anda sudah bisa membuat website. jika anda belum mempunyai file bootstrapnya silakan di download di getbootstrap.com secara gratis. jika sudah anda download silakan anda ekstrak.
Pada layout yang akan kita buat ini kita akan mennggunakan navbar untuk menu navigasi kemudian carousel untuk slidernya, lalu dibawahnya ada jumbotron dan di bawahnya ada tiga buah grid. lalu di halaman profile ada paragraf untuk menampilkan post dan dibawahnya ada paination, dan disebelah kanan menu ada tombol login jika di klik akan menampilkan modal login.
Untuk membuatnya pertama buat file index.php isinya seperti berikut:

<!DOCTYPE html>
<html>
    <head>
        <title>Latihan form</title>
        <!-- Bootstrap Core CSS -->
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <!-- Bootstrap Core JS -->
<script src="bootstrap/js/jquery.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
    </head>
    <body>


<nav class="navbar navbar-default">
 <div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="index.html">BRAND</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 <ul class="nav navbar-nav">
<li class="active"><a href="index.html">Beranda <span class="sr-only">(current)</span></a></li>
<li><a href="profile.html">Profile</a></li>
<li class="dropdown">
 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Category <span class="caret"></span></a>
 <ul class="dropdown-menu">
<li><a href="category-olahraga.html">Olahraga</a></li>
<li><a href="category-gosip.html">Gosip</a></li>
<li><a href="category-politik.html">Politik</a></li>
 </ul>
</li>
 </ul>
 <form class="navbar-form navbar-left" role="search">
<div class="form-group">
 <input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
 </form>
 <ul class="nav navbar-nav navbar-right">
<li><a href="register.html">Register</a></li>
<li><a class="btn" data-toggle="modal" data-target="#myModal">Login</a></li>
 </ul>
</div><!-- /.navbar-collapse -->
 </div><!-- /.container-fluid -->
</nav>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
 <div class="modal-dialog" role="document">
<div class="modal-content">
 <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
 </div>
 <div class="modal-body">
<input type="text" name="username" class="form-control" placeholder="Username"><br>
<input type="password" name="password" class="form-control" placeholder="Password">
 </div>
 <div class="modal-footer">
<input type="checkbox" name="check" class="left">Ingat Saya
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success">Login</button>
 </div>
</div>
 </div>
</div>


<!-- Page Content -->
<div class="container">

<!-- Heading Row -->
<div class="row">
<div class="col-md-12">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
 <!-- Indicators -->
 <ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
 </ol>

 <!-- Wrapper for slides -->
 <div class="carousel-inner" role="listbox">
<div class="item active">
 <img src="image/1d.jpg" alt="...">
 <div class="carousel-caption">
<h3>First Thumbnail Label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe rem nisi accusamus error velit animi non ipsa placeat. Recusandae, suscipit, soluta quibusdam accusamus a veniam quaerat eveniet eligendi dolor consectetur</p>
 </div>
</div>
<div class="item">
 <img src="image/2c.jpg" alt="...">
 <div class="carousel-caption">
<h3>Second Thumbnail label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe rem nisi accusamus error velit animi non ipsa placeat. Recusandae, suscipit, soluta quibusdam accusamus a veniam quaerat eveniet eligendi dolor consectetur</p>
 </div>
</div>
<div class="item">
 <img src="image/3c.jpeg" alt="...">
 <div class="carousel-caption">
<h3>Third Thumbnail Label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe rem nisi accusamus error velit animi non ipsa placeat. Recusandae, suscipit, soluta quibusdam accusamus a veniam quaerat eveniet eligendi dolor consectetur</p>
 </div>
</div>
 </div>

 <!-- Controls -->
 <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
 </a>
 <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
 </a>
</div>
</div>
</div>
<!-- /.row -->

<div class="row">
<div class="col-md-12">
<!-- Hello Word yang nyambung-->
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe rem nisi accusamus error velit animi non ipsa placeat. Recusandae, suscipit, soluta quibusdam accusamus a veniam quaerat eveniet eligendi dolor consectetur.</p>
<a class="btn btn-default" href="#">More Info</a>
</div>
<!-- /.col-md-4 -->
<!-- Content Row -->
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="image/2c.jpg" alt="Gambar 1">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe rem nisi accusamus error velit animi non ipsa placeat. Recusandae, suscipit, soluta quibusdam accusamus a veniam quaerat eveniet eligendi dolor consectetur</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>

<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="image/2c.jpg" alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe rem nisi accusamus error velit animi non ipsa placeat. Recusandae, suscipit, soluta quibusdam accusamus a veniam quaerat eveniet eligendi dolor consectetur</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>

<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="image/2c.jpg" alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe rem nisi accusamus error velit animi non ipsa placeat. Recusandae, suscipit, soluta quibusdam accusamus a veniam quaerat eveniet eligendi dolor consectetur</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>

</div>
<!-- /.col-md-4 -->
</div>
<!-- /.row -->

<!-- Footer -->

<footer style="margin-top:20px;">
<div class="row">
<div class="col-lg-12">
<p>Copyright &copy; MY Website 2016</p>
</div>
</div>
</footer>

</div>

    </body>
</html>

kemudian untuk file profile.php isinya seperti berikut:

<!DOCTYPE html>
<html>
    <head>
        <title>Latihan form</title>
        <!-- Bootstrap Core CSS -->
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <!-- Bootstrap Core JS -->
<script src="bootstrap/js/jquery.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
    </head>
    <body>


<nav class="navbar navbar-default">
 <div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="index.html">BRAND</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 <ul class="nav navbar-nav">
<li><a href="index.html">Beranda <span class="sr-only">(current)</span></a></li>
<li class="active"><a href="profile.html">Profile</a></li>
<li class="dropdown">
 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Category <span class="caret"></span></a>
 <ul class="dropdown-menu">
<li><a href="category-olahraga.html">Olahraga</a></li>
<li><a href="category-gosip.html">Gosip</a></li>
<li><a href="category-politik.html">Politik</a></li>
 </ul>
</li>
 </ul>
 <form class="navbar-form navbar-left" role="search">
<div class="form-group">
 <input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
 </form>
 <ul class="nav navbar-nav navbar-right">
<li><a href="register.html">Register</a></li>
<li><a class="btn" data-toggle="modal" data-target="#myModal">Login</a></li>
 </ul>
</div><!-- /.navbar-collapse -->
 </div><!-- /.container-fluid -->
</nav>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <input type="text" name="username" class="form-control" placeholder="Username"><br>
<input type="password" name="password" class="form-control" placeholder="Password">
      </div>
      <div class="modal-footer">
<input type="checkbox" name="check" class="left">Ingat Saya
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-success">Login</button>
      </div>
    </div>
  </div>
</div>


<!-- Page Content -->
<div class="container">

<!-- Heading Row -->
<div class="row">
<div class="col-md-12">
<h3><a href="detail_news.html">Thumbnail label</a></h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe rem nisi accusamus error velit animi non ipsa placeat. Recusandae, suscipit, soluta quibusdam accusamus a veniam quaerat eveniet eligendi dolor consectetur</p>
<h3><a href="detail_news.html">Thumbnail label</a></h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe rem nisi accusamus error velit animi non ipsa placeat. Recusandae, suscipit, soluta quibusdam accusamus a veniam quaerat eveniet eligendi dolor consectetur</p>
<h3><a href="detail_news.html">Thumbnail label</a></h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe rem nisi accusamus error velit animi non ipsa placeat. Recusandae, suscipit, soluta quibusdam accusamus a veniam quaerat eveniet eligendi dolor consectetur</p>

<nav>
  <ul class="pagination">
    <li><a href="#" aria-label="Previous"><span aria-hidden="true">Prev</span></a></li>
    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
    <li><a href="#">2 <span class="sr-only"></span></a></li>
<li><a href="#">3 <span class="sr-only"></span></a></li>
<li><a href="#">4 <span class="sr-only"></span></a></li>
<li><a href="#">5 <span class="sr-only"></span></a></li>
<li><a href="#" aria-label="Previous"><span aria-hidden="true">Next</span></a></li>
  </ul>
</nav>
</div>
<!-- Footer -->

<footer style="margin-top:20px;">
<div class="row">
<div class="col-lg-12">
<p>Copyright &copy; MY Website 2016</p>
</div>
</div>
</footer>

</div>

    </body>
</html>

agar javascripnya jalan kita memerlukan library jquery silkan download file jquerynya di api.jquery.org/download untuk versinya kita gunakan yang versi 1.11.1 kemudian simpan file jquerynya di folder js.

sekianlah tutorial yang saya berikan semoga bermanfaat jika ada yang kurang di mengerti silakan ditanyakan di bawah terimakasih.
Read More
Langganan: Postingan ( Atom )