Form submit button that kills my navbar - php

To do the login / logout of my website, I use a simple button that leads to a modal form who leads to a log action for the login.
For the logout, the best way I found is to use a dummy form who just contains the logout button that leads to the log action.
Everything works but the dummy forms kills my navbar design.
PHP Code :
<!-- Login -->
<?php
if(!isset($_SESSION['user'])) {
echo '
<button class="btn btn-outline-info my-2 my-sm-0" type="button" data-toggle="modal" data-target="#ModalExample" style="margin-left: 10px">Login</button>
';
}
else {
echo '
<form action="actions/log.php" method="post">
<input type="submit" value="Log out" class="btn btn-outline-danger my-2 my-sm-0" style="margin-left: 10px">
</form>
';
}
?>
Navbar :
<nav class="navbar fixed-top navbar-toggleable-md navbar-light bg-faded" data-spy="affix" data-offset-top="90">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Beauty Website</a>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto mt-2 mt-md-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#othersec">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#versatility">Offers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#lightbox">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#opportunities">Shop</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Appointment</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact us</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
Do you know how i could make it better ?

Thanks for you help, I just forgot I had a class in my navbar form.
Here is the working PHP:
<!-- Login -->
<?php
if(!isset($_SESSION['user'])) {
echo '
<button class="btn btn-outline-info my-2 my-sm-0" type="button" data-toggle="modal" data-target="#ModalExample" style="margin-left: 10px">Login</button>
';
}
else {
echo '
<form class="form-inline my-2 my-lg-0" action="actions/log.php" method="post">
<input type="submit" value="Log out" class="btn btn-outline-danger my-2 my-sm-0" style="margin-left: 10px">
</form>
';
}
?>

Related

Bootstrap navbar toggler icon is not working on mobile

hope you are all doing well, i have just face a problem. i make my website online. everything working well expect navbar toggler icon. it is not working on mobile device. it is working well on desktop
here is my code
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="index.php"><img src="./assests/images/logo.png" class="logo ml-5" alt="file not found" /> </a>
<button class="navbar-toggler " type="button" role="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"> </span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item <?php if($page == 'home') echo 'active' ?>">
<a class="nav-link " href="index.php"><i class="mr-2 fas fa-home"> </i>Home </a>
</li>
<li class="nav-item <?php if($page == 'about') echo 'active' ?>">
<a class="nav-link" href="about.php"><i class="mr-2 fas fa-users"> </i> About Us</a>
</li>
<li class="nav-item dropdown <?php if($page == 'products') echo 'active' ?>" >
<a class="nav-link dropdown-toggle dropdown-toggle-split" href="products.php" data-toggle="dropdown" id="dropedownMenuButton"aria-expanded="false" aria-hospopup="true" >
<i class="mr-2 fas fa-wrench"> </i>Products
</a>
<ul class="dropdown-menu" aria-labelledby="dropedownMenuButton">
<li class="list-group-item">
<a class="dropdown-item" href="bolts-screws.php"> Bolts/Screws </a>
</li>
<li class="list-group-item">
<a class="dropdown-item" href="nuts.php"> Nuts </a>
</li>
<li class="list-group-item">
<a class="dropdown-item" href="washers.php"> Washers </a>
</li>
<li class="list-group-item">
<a class="dropdown-item" href="screws.php"> Screws </a>
</li>
<li class="list-group-item">
<a class="dropdown-item" href="socket-bolt-screws.php"> Socket Bolts/Screws </a>
</li>
<li class="list-group-item">
<a class="dropdown-item" href="anchor-fastener.php"> Anchor Fasteners </a>
</li>
</ul>
</li>
<li class="nav-item <?php if($page == 'connect') echo 'active' ?>">
<a class="nav-link" href="connect.php"><i class="mr-2 fas fa-user"> </i> Contact us </a>
</li>
</ul>
</div>
</div>
</nav>
you can check my website also
http://rudrafasteners.com/
It seems you don't add Javascript at your head. Add the followings lines to your HTML <head> tag (Jquery and Bootstrap JS):
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

how to show data of databse in navigation bar on laravel 7

i am new to laravel. currently i am working on laravel 7. i made a navigation bar a seperate file which i extends on all the front end file. i just know that when i need a data from the database in front end
then i do like this
$cat = modelname::all();
return view('addproducts')->with('cat',$cat);
but that code works on that condition when i have to go to that front end blade file. but on navigation bar senario i dont need to go to the nav file i just go to another blade file and nav file is extended on it.
i just want to know how to access the data from the databse on navigation bar
<html>
<head>
<meta charset="utf-8">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{{'addcategory'}}">Add Catgory <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{'showcategory'}}">show Category</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Manage Products
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{'
addproducts'}}">Add Products</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
#yield('content')
</body>
</html>
this is the code of my nav file where i want to get the data from the database and then want to show in a dropdown menu
#extends('layouts.nav');
#section('content')
//code for the front end of the page
#endsection
this is how i extend the nav file on another page
#Fahad Munir would something like this work in your case? Using 'include' instead of 'extends'?
#include('layouts.nav', ['cat' => $cat = App\modelname::all();])
If this does not work for your purposes, you may also consider using a View Composer.
See the Laravel documentation about View Composers here: https://laravel.com/docs/7.x/views#view-composers.
Utilizing a View Composer would allow you to add something like the following to the boot() method in your appServiceProvider or after creating a new service provider using artisan and adding to the boot() method after doing that like so:
view()->composer('layouts.nav', function($view) {
$view->with('cat', App\modelname::all());
});
Read more about that in the Laravel documentation here, if need be:
https://laravel.com/docs/7.x/providers#the-boot-method
If your on Laravel 7 then you really need to use the new component feature added to Laravel 7, to do that run php artisan make:component NavigationComponent, this will generate a NavigationComponent class and a navigation-component blade file.
navigation-component.blade.php
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{{'addcategory'}}">Add Catgory <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{'showcategory'}}">show Category</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Manage Products
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{'
addproducts'}}">Add Products</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
NavigationComponent.php
<?php
namespace App\View\Components;
use Illuminate\View\Component;
class NavigationComponent extends Component
{
public $cat;
/**
* Create a new component instance.
*
* #return void
*/
public function __construct()
{
$this->cat = CatModel::all();
}
/**
* Get the view / contents that represent the component.
*
* #return \Illuminate\View\View|string
*/
public function render()
{
return view('components.navigation-component');
}
}
For more visit Laravel Component docs

How to fix navbar collision without container-fluid?

I took the code from the Bootstrap Documentation with my existent code and it crashed it, meanwhile I put the same code in a Test.html and it works. I tried downloading the last version, put all bootstrap.min.css and all that stuff but it doesn't work, tried to put container-fluid at line 18 but the problem persists
I took the code from the Bootstrap Documentation (NavBars).
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Portal</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/estilos.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
Also my login.php code (when it collide)
<?php require 'inc/cabecera.inc'; ?>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 text-center">
<h1>Portal web</h1>
</div>
</div>
<div class="row">
<div class="col-sm-4 caja col-centrar">
<form action="login.php" method="POST" role="form">
<legend>Logueate!</legend>
<div class="form-group">
<input name="email" type="text" class="form-control" id="" placeholder="Su email...">
</div>
<div class="form-group">
<input name="contrasena" type="password" class="form-control" id="" placeholder="Su contraseña...">
</div>
<button type="submit" class="btn btn-primary">Ingresar</button>
<a class="pull-right" href="registrarse.php">Registrarse</a>
<label for="" class="checkbox-inline">
<input name="recordar" type="checkbox" value="activo"> Mantener sesión iniciada.
</label>
</form>
</div>
</div>
</div>
<?php require 'inc/footer.inc'; ?>
The problem:
It's all good:

How do I change my nav menu bar to say 'Logout' when logged in

I'm working on a small project to get a basic website done and I can't figure out how in php I get my menu navbar to change to Logout as soon as the user has successfully signed in.
I've pasted the navbar code and all the code I think which may be relevant. Any help or guidance would be appreciated. Quite new to php, you may need to see all the code below so apologise if not much help. The PHP code was used from a YouTube tutorial....
NavBar Menu Code
iStudy University
<section class="collapse navbar-collapse" id="myTogglerNav">
<div class="navbar-nav ml-auto">
<a class="nav-item nav-link px-3" href="index.php"><i class="fas fa-home"><span class="nav-text"> Home</span></i></a>
<a class="nav-item nav-link px-3" href="about.html"><i class="fas fa-info-circle"><span class="nav-text"> About</span></i></a>
<a class="nav-item nav-link px-3" href="contact.html"><i class="fas fa-envelope"><span class="nav-text"> Contact Us</span></i></a>
<a class="nav-item nav-link px-3" href="signup.php"><i class="fas fa-check-square"><span class="nav-text"> Sign Up</span></i></a>
<a class="nav-item nav-link px-3" href="login.php"><i class="fas fa-sign-in-alt"><span class="nav-text"> Login</span></i></a>
</div>
</section>
</div>
Some PHP which is applied:
<?php
if (!isset($_SESSION['id'])) {
echo '<form action="includes/login.inc.php" method="post">
<input type="text" name="mailuid" placeholder="Email">
<input type="password" name="pwd" placeholder="Password">
<button type="submit" name="login-submit">Login</button>
</form>';
}
else if (isset($_SESSION['id'])) {
echo '<form action="includes/logout.inc.php" method="post">
<button type="submit" name="logout-submit">Logout</button>
</form>';
}
?>
The signup form code:
<form class="form-signup" action="includes/signup.inc.php" method="post">
<?php
// Here we check if the user already tried submitting data.
// We check username.
if (!empty($_GET["uid"])) {
echo '<input type="text" name="uid" placeholder="Username" value="'.$_GET["uid"].'">';
}
else {
echo '<input type="text" name="uid" placeholder="Username">';
}
// We check e-mail.
if (!empty($_GET["mail"])) {
echo '<input type="text" name="mail" placeholder="Email" value="'.$_GET["mail"].'">';
}
else {
echo '<input type="text" name="mail" placeholder="Email">';
}
?>
<input type="password" name="pwd" placeholder="Password">
<input type="password" name="pwd-repeat" placeholder="Repeat password">
<button type="submit" name="signup-submit">Signup</button>
</form>
Do the same that's been done for your form on the <a> tag in your navigation.
<section class="collapse navbar-collapse" id="myTogglerNav">
<div class="navbar-nav ml-auto">
<a class="nav-item nav-link px-3" href="index.php"><i class="fas fa-home"><span class="nav-text"> Home</span></i></a>
<a class="nav-item nav-link px-3" href="about.html"><i class="fas fa-info-circle"><span class="nav-text"> About</span></i></a>
<a class="nav-item nav-link px-3" href="contact.html"><i class="fas fa-envelope"><span class="nav-text"> Contact Us</span></i></a>
<a class="nav-item nav-link px-3" href="signup.php"><i class="fas fa-check-square"><span class="nav-text"> Sign Up</span></i></a>
<?php
if (!isset($_SESSION['id'])) {
echo "<a class='nav-item nav-link px-3' href='login.php'><i class='fas fa-sign-in-alt'><span class='nav-text'> Login</span></i></a>";
} else {
echo "<a class='nav-item nav-link px-3' href='logout.php'><i class='fas fa-sign-out-alt'><span class='nav-text'> Logout</span></i></a>";
}
?>
</div>
</section>

laravel not getting bootstrap stylesheet

so i am new to LARAVEL and i am following a tutoriel. he created a navbar with bootstrap and gets this result :
and me i get this :
this is my code :
app.blade.php
<!DOCTYPE html>
<html>
<head>
<title>WebSite</title>
<link rel="stylesheet" type="text/css" href="css/app.css">
</head>
<body>
#include('inc.navbar')
#yield('content')
</body>
</html>
navbar.blade.php
<nav class="navbar navbar-expand-md navbar-dark bg-dark ">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="https://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
Below are the cdn's
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
use thses cdn's as like below.
<!DOCTYPE html>
<html>
<head>
<title>WebSite</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark ">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="https://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</body>
</html>
Fiddle

Categories