Beranda Asset Bootstrap Dropdown Aktraktif offline Mode

Asset Bootstrap Dropdown Aktraktif offline Mode

Updated: 02 Sep, 2021 • 0 • min read

Table of Contents

Memasang Bootstrap Dropdown

1.Memangil dari penyimpana awan atau onlin

Menambahkan code js dan css diantara code tak

<head>

JS, Popper.js, dan jQuery

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
     controllest
            navigation
                first-navigation.php

2.Memasang dari penyimpan dalam folder root server

htdocs

css

animate

base

bootstrap

bootstrap-form-helpers

font-awesome

controllest

navigation

first-navigation.php

<style> .menucls {    background-color: #347634;    border-color: #425766;  }  .menucls .navbar-brand {    color: #101213;  }  .menucls .navbar-brand:hover, .menucls .navbar-brand:focus {    color: #aba8a9;  }  .menucls .navbar-text {    color: #101213;  }  .menucls .navbar-nav > li > a {    color: #101213;  }  .menucls .navbar-nav > li > a:hover, .menucls .navbar-nav > li > a:focus {    color: #aba8a9;  }  .menucls .navbar-nav > li > .dropdown-menu {    background-color: #347634;  }  .menucls .navbar-nav > li > .dropdown-menu > li > a {    color: #101213;  }  .menucls .navbar-nav > li > .dropdown-menu > li > a:hover,  .menucls .navbar-nav > li > .dropdown-menu > li > a:focus {    color: #aba8a9;    background-color: #425766;  }  .menucls .navbar-nav > li > .dropdown-menu > li > .divider {    background-color: #347634;  }  .menucls .navbar-nav > .active > a, .menucls .navbar-nav > .active > a:hover, .menucls .navbar-nav > .active > a:focus {    color: #aba8a9;    background-color: #425766;  }  .menucls .navbar-nav > .open > a, .menucls .navbar-nav > .open > a:hover, .menucls .navbar-nav > .open > a:focus {    color: #aba8a9;    background-color: #425766;  }  .menucls .navbar-toggle {    border-color: #425766;  }  .menucls .navbar-toggle:hover, .menucls .navbar-toggle:focus {    background-color: #425766;  }  .menucls .navbar-toggle .icon-bar {    background-color: #101213;  }  .menucls .navbar-collapse,  .menucls .navbar-form {    border-color: #101213;  }  .menucls .navbar-link {    color: #101213;  }  .menucls .navbar-link:hover {    color: #aba8a9;  }    @media (max-width: 767px) {    .menucls .navbar-nav .open .dropdown-menu > li > a {      color: #101213;    }    .menucls .navbar-nav .open .dropdown-menu > li > a:hover, .menucls .navbar-nav .open .dropdown-menu > li > a:focus {      color: #aba8a9;    }    .menucls .navbar-nav .open .dropdown-menu > .active > a, .menucls .navbar-nav .open .dropdown-menu > .active > a:hover, .menucls .navbar-nav .open .dropdown-menu > .active > a:focus {      color: #aba8a9;      background-color: #425766;    }  }  </style> <?php      include '_database/database.php';      $current_user = $_SESSION['user_username'];        $sql = "SELECT * FROM user WHERE user_username='$current_user'";      $result = mysqli_query($database,$sql);      while($row = mysqli_fetch_array($result,MYSQLI_BOTH)) {  ?>      </head> <body> <div class="container"> <nav class="navbar menucls">   <div class="container-fluid">          <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="my-profile.php?user_username">   <img class="img-circle" src="userfiles/avatars/<?php echo $row['user_avatar'];?>" class="" alt="<?php echo $row['user_username'];?>   <?php echo $row['user_lastname'];?>alt="Generic placeholder image" style="      width: 37px;   height: 37px   box-shadow:3px 3px 3px 3px #ADC2B3;         left: calc(50% - 7px);   top: calc(50% - 6px);   border: 2px solid;   background: none;  " ><?php echo $row['user_username'];?> <?php  }  ?> </a>     </div>     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">       <ul class="nav navbar-nav"><li class="active"><a href="logout.php">Keluar<span class="sr-only">(current)</span></a></li><li><a href="profile.php?user_username">Profile</a></li><li><a href="edit-profile.php?user_username">Edit Profile</a></li><li class="dropdown">           <a href="forum-topic.php?user_username" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Forum <span class="caret"></span></a>           <ul class="dropdown-menu"><li><a href="home.php?user_username">Home</a></li><li><a href="forum.php?user_username">Forum</a></li><li role="separator" class="divider"></li><li><a href="">Select</a></li></ul></li></ul><form class="navbar-form navbar-left" role="search">         <div class="form-group">           <input type="text" class="form-control" placeholder="Find topics">         </div><button type="submit" class="btn btn-success">Go</button>       </form><ul class="nav navbar-nav navbar-right"><li class="dropdown">           <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Messages  <?php   $servername = "localhost";   $username = "root";//Sesuikan dengan database anda   $password = "";//Sesuikan dengan database anda  $dbname = "userprofile";//Sesuikan dengan database anda  $conn = new mysqli($servername, $username, $password, $dbname);  if ($conn->connect_error)  { die("Connection failed: " . $conn->connect_error);   }   $current_user = $_SESSION['user_username'];  $sql = "SELECT count(*) as count from user_messages where user_messages_created ='$user_username'";  $result = $conn->query($sql);   if ($result->num_rows > 0) {   $row = $result->fetch_assoc();   echo $row['count'];  echo "<i style='color:orange;  font-size: 10px;'/> ".$row['count']."</i>";  }  else { echo "0 results";  }  $conn->close()  ?>   <?php       include '_database/database.php';      $current_user= $_SESSION['user_username'];      $sql = "SELECT * FROM user_messages where user_messages_name= '$user_username'";      $result= mysqli_query($database,$sql);      while($rws_jdk= mysqli_fetch_array($result)){                    $temp_user_username= $rws_jdk['user_messages_name'];          $sql_search_username= "SELECT * FROM user WHERE user_username = '$temp_user_username'";          $result_search_username= mysqli_query($database,$sql_search_username);          $rws_search_username_aler= mysqli_fetch_array($result_search_username);      ?> <div/><a href="user_view_messages.php?user_messages_id=<?php echo $rws_jdk ['user_messages_id'];?>" style="font-size: 19px;">                                                    <?php echo $rws_search_username_aler['user_username'];?>    : <?php echo $rws_jdk['user_messages_body'];?> <img class="img-circle" src="userfiles/avatars/<?php echo $rws_search_username_aler['user_avatar'];?>" class="" alt="<?php echo $rws_search_username_aler['user_usernamr'];?>   <?php echo $rws_search_username_aler['user_lastname'];?>alt="Generic placeholder image" style="width: 40px; height: 30px;font-size: 10px;   box-shadow:3px 3px 3px 3px #ADC2B3;         left: calc(50% - 7px);   top: calc(50% - 6px);   border: 2px solid;   background: none;  " >    <?php                                          if($rws_jdk['user_messages_image']){                                      ?>                                                                                                                 <img src="userfiles/imgmessages/<?php echo $rws_jdk['user_messages_image'];?>"  style="      width: 100px;   height: 100px  " >                                     <div/>                                     <?php                                          }                                      ?><br/>   <?php                                                                                ?>   <br/> Riwayat    <?php   $servername = "localhost";   $username = "root";//Sesuikan dengan database anda   $password = "";//Sesuikan dengan database anda  $dbname = "userprofile";//Sesuikan dengan database anda  $conn = new mysqli($servername, $username, $password, $dbname);  if ($conn->connect_error)  { die("Connection failed: " . $conn->connect_error);   }   $current_user = $_SESSION['user_username'];  $sql = "SELECT count(*) as count from user_messages where user_messages_created='$user_username'";  $result = $conn->query($sql);   if ($result->num_rows > 0) {   $row = $result->fetch_assoc();   echo $row['count'];  }  else { echo "0 results";  }  $conn->close()  ?> </a> <br/>   <?php       include '_database/database.php';      $current_user = $_SESSION['user_username'];      $sql = "SELECT * FROM user_messages WHERE user_messages_name='$user_username' ORDER BY user_messages_id DESC";      $result = mysqli_query($database,$sql);      while($rws_tw= mysqli_fetch_array($result,MYSQLI_BOTH)) {                    $temp_user_username= $rws_tw['user_messages_name'];          $sql_search_username= "SELECT * FROM user WHERE user_username = '$temp_user_username'";          $result_search_username= mysqli_query($database,$sql_search_username);          $rws_search_username_tw= mysqli_fetch_array($result_search_username);      ?><br/> <img class="img-circle" src="userfiles/avatars/<?php echo $rws_search_username_aler['user_avatar'];?>" class="" alt="<?php echo $rws_search_username_aler['user_usernamr'];?>   <?php echo $rws_search_username_aler['user_lastname'];?>alt="Generic placeholder image" style="width: 40px; height: 30px;font-size: 18px;   box-shadow:3px 3px 3px 3px #ADC2B3;         left: calc(50% - 7px);   border: 2px solid;   background: none;  " > <a href="user_view_messages.php?user_messages_id=<?php echo $rws_jdk['user_messages_id'];?>" style="font-size: 18px;">                                                    <?php echo $rws_search_username_tw ['user_username'];?>    : <?php echo $rws_tw['user_messages_body'];?>  <?php                                          if($rws_tw['user_messages_image']){                                      ?>                                                                          <div/">                                         <img src="userfiles/imgmessages/<?php echo $rws_tw['user_messages_image'];?>"  style="      width: 100px;   height: 100px  " >                                     <div/>                                     <?php                                          }                                      ?><br/>   <?php                                          }  }                                      ?> <span class="caret"></span></a>           <ul class="dropdown-menu"><li><a href="">Terms</a></li><li><a href="">Contact</a></li></ul></li></ul></div>   </div> </nav> </div></body> </html>

Akan terlihat seperti gambar dibawah jika didalam database host server anda sudah menulis table berikut ini
Database yang terhubung pada file first-navigation.php
User // Sistem user Regiter

user_messanges //Messages table

Jika mengunakan metode pemasangan secara onlin
tidak disarankan untuk mengunakan kedua metode secara bersam- sama ,
akan menyebabkan kerja yang tidak setablil
rekomendasi
untuk pemasangan secara offline
unduh dan extrak,letakan pada root folder websit
Bootstrap Dropdown.zip Download

Posting Komentar