I connect bootstrap, but laravel cant find styles
app.blade.php:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="csrf-token" content="={{csrf_token()}}">
<title>#yield('title-block')</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="public/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="public/css/style.css">
</head>
<body>
#yield('content')
</body>
</html>
<?php
registration.blade.php:
#extends('layouts.app')
#section('title-block')
Регистрация
#endsection
#section('content')
<div class="container">
<h1 align="center">
{{-- <img src="img/logo.jpg" alt="logo" class="home">--}}
Register
</h1>
</div>
<hr>
<form name="register" method="POST" action="{{route('user.registration')}}">
#csrf
<input class="text-input" type="text" placeholder="Enter your surname" name="surname" required>
<input class="text-input" type="text" placeholder="Enter your name" name="name" required><br>
<input class="text-input" type="text" placeholder="Enter your number" name="number" required><br>
<input class="text-input" type="text" placeholder="Enter your father`s name" name="fathers_name" required>
<input class="text-input" type="text" placeholder="Enter parent number" name="parents_number" required><br>
<input class="text-input-full-width" id="password" name="password" type="password" required placeholder="Enter password"><br>
<button class="btn btn-lg btn-primary" type="submit" name="sendMe" value="1">Войти</button>
</form>
#endsection
I am beginner and dont understand why laravel dont see styles.css. I have try this
but its doesn`t work. I hope you can help me
enter image description here
<link href="{{ asset('css/style.css') }}" rel="stylesheet">
You can use simply <link rel="stylesheet" type="text/css" href="/css/bootstrap.css">
For Laravel
<link rel="stylesheet" type="text/css" href="{{ asset('css/bootstrap.css')">
And Add ASSET_URL="${APP_URL}" in .env file.
Don't Forget to clear views & cache
php artisan view:clear
php artisan config:cache
I find answer. I can only use <link rel="stylesheet" type="text/css" href="css/style.css"> without "public/"
Related
I want my code once press submit to be redirected to another website.
I want this to be done through a PHP script so it can be expanded.
The problem is that when I test the code the PHP script is loaded in the browser with a blank page instead of redirecting it to the web I want.
I leave you my current code:
SIGN_IN.HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="https://getbootstrap.com/docs/4.0/assets/img/favicons/favicon.ico">
<title>Signin Template for Bootstrap</title>
<link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/sign-in/">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/signin.css" rel="stylesheet">
</head>
<body class="text-center">
<div class="form-signin">
<form action="post.php">
<img class="mb-4" src="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<input class="btn btn-lg btn-primary btn-block" type="submit" value="Sign in"/>
<p class="mt-5 mb-3 text-muted">© 2017-2018</p>
</form>
</div>
</body>
</html>
POST.PHP
<?php
header ("Location: https://getbootstrap.com/docs/4.0/examples/sign-in/");exit;
?>
PD:As you can see, the page is an example website, I do not intend to carry out any cybercrime, just learn
Thanks
I think your file is Capital letter, right? It should be post.php, not POST.php.
Please check again.
I've tested your code with post.php. It works well.
I'm building a form using Laravel 5 and I want to error messages to appear next to the field of authentication page.
This is my controller
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/css/bootstrap.css" rel="stylesheet">
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/bootstrap-theme.css" rel="stylesheet">
<link href="/css/all.css" rel="stylesheet">
<link href="/css/all.min.css" rel="stylesheet">
<link href="/css/Style.css" rel="stylesheet">
<script src="/js/jquery-2.2.4.min.js"></script>
<script src="/js/bootstrap.js"></script>
<script src="/js/all.js"></script>
<script src="/js/all.min.js"></script>
<title>LOGIN</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
</head>
<body>
<form id="form1" action="/loginme" method="post">
<div >
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<div class="login_form">
<div class="inputWithIcon">
<i class="fas fa-user-tie" ></i>
<input type="text" placeholder="Username" class="form-control" name="username" />
</div>
<div class="inputWithIcon">
<i class="fas fa-unlock-alt" ></i>
<input type="password" placeholder="Password" class="form-control" name="password" />
</div>
<br />
<label class="invalid-feedback" id="login_error"></label>
<input type="submit" id="submitBtn" class="btn btn-secondary btn-block login-submit-btn" value="Login"></input>
</div>
</div>
</form>
</body>
</html>
And I would like to display the alert message with a click on the button "submitBtn"
this is my controller
You need to use validation in your controller.
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Validator;
use DB;
class LoginController extends Controller {
public function login(Request $request){
$this->validate($request, [
'username' => 'required',
'password' => 'required'
]);
$username = $request->input('username');
$password = $request->input('password');
$checklogin = DB::table('users')->where(['Username' => $username, 'Password' => $password])->get();
if(count($checklogin)){
echo "login successful";
}else{
return view('login');
}
}
}
Then in your blade you can use the retured error like this:
<input type="text" placeholder="Username" class="form-control" name="username" />
#if ($errors->has('username'))
<span class="error-text text-danger">{{ $errors->first('username') }}</span>
#endif
<input type="password" placeholder="Password" class="form-control" name="password" />
#if ($errors->has('password'))
<span class="error-text text-danger">{{ $errors->first('password') }}</span>
#endif
yo can write
<input type="text" placeholder="Username" class="form-control" name="username" />
#if ($errors->has('username')) <span class="error-text text-danger">{{ $errors->first('username') }}</span> #endif
<input type="password" placeholder="Password" class="form-control" name="password" />
#if ($errors->has('password')) <span class="error-text text-danger">{{ $errors->first('password') }}</span> #endif
For laravel project i use a metarial design bootstrap(MDBootstrap) template. use this template for master design and if i need to add somthing then i use #yeild(''). every thing is fine but if want to add radio button in form, this button is not showing in page.
here is my head what master.blade.php used..
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<!-- Scripts -->
<!-- Fonts -->
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,600" rel="stylesheet" type="text/css">
<!-- Styles -->
<link href="metarial/css/mdb.min.css" rel="stylesheet">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link href="metarial/bootstrap.min.css" rel="stylesheet">
at last of the body...
<script type="text/javascript" src="metarial/js/jquery-3.2.1.min.js"></script>
<!-- Tooltips -->
<script type="text/javascript" src="metarial/js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
{{--
<script type="text/javascript" src="metarial/js/bootstrap.min.js"></script> --}}
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="metarial/js/mdb.min.js"></script>
<script>
// SideNav Initialization
$(".button-collapse").sideNav();
new WOW().init();
</script>
Form is...
<form role="form" action="{{url('/children/add')}}" method="post" enctype="multipart/form-data">
#csrf
<div class="form-group ml-4 mr-4">
<div class="row">
<div class="col-6">
<label for="name">First Name</label>
<input value="{{ old('firstName') }}" name="firstName" type="text" class="form-control" id="first" placeholder="First Name">
</div>
<div class="col-6">
<label for="name">Last Name</label>
<input value="{{ old('lastName') }}" name="lastName" type="text" class="form-control" id="last" placeholder="Last Name">
</div>
</div>
</div>
<div class="radio form-group ml-4 mr-4">
<label><input type="radio" name="optradio">Male</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">Female</label>
</div>
<div class="form-group ml-4 mr-4">
<label for="Birthday">Birthday</label>
<input name="birthday" type="date" class="form-control" id="birthday">
</div>
<div class="form-group ml-4 mr-4">
<label for="image">Profile Image</label>
<input type="file" name="image" class="form-control" id="image">
</div>
<button type="submit" style="background-color:#2DAE60;" class="btn">
<i class="fa fa-plus"></i> ADD </button>
</form>
picture of this page where radio button missing but text 'Male','Female' is remaining...
can anyone help me please?
Try changing this:
<div class="radio">
<label><input type="radio" name="optradio">Female</label>
</div>
To this:
<div class="radio">
<input type="radio" id="female-rb" name="optradio" />
<label for="female-rb">Female</label>
</div>
When using labels you should define for which radio button the label applies. You do this by adding the for attribute and let it referring the id of the radio button. To correctly render the radio button you should place the input first and then the label.
I am designing page in CI framework and have correctly included files but the css is not getting applied even though browser shows its calling them correctly..not sure where I am going wrong.
Below is the code I have written:
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?><!DOCTYPE html>
<html lang="en">
<head>
<title>login</title>
<?php include_once 'header.php'; ?>
</head>
<body class="bg-dark">
<div class="container">
<div class="card card-login mx-auto mt-5">
<div class="card-header">Please enter your login details:</div>
<div class="card-body">
<form>
<div class="form-group">
<label for="name">Username</label>
<input class="form-control" placeholder="User name" name="name" type="text" id="name" autofocus>
</div>
<div class="form-group">
<label for="password">Password</label>
<input class="form-control" id="password" type="password" placeholder="Password" id="password">
</div>
<div>
<input type="submit" name="submit" value="Login" class="btn btn-lg btn-success btn-block">
</div>
</form>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript-->
<script src="<?php echo base_url('assets/vendor/jquery/jquery.min.js');?>"></script>
<script src="<?php echo base_url('assets/vendor/bootstrap/js/bootstrap.bundle.min.js');?>"></script>
<!-- Core plugin JavaScript-->
<script src="<?php echo base_url('assets/vendor/jquery-easing/jquery.easing.min.js');?>"></script>
</body>
</html>
When I click on browser by pressing F12 I get this :
<!DOCTYPE html>
<html lang="en">
<head>
<title>login</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<!-- Bootstrap core CSS-->
<link href="http://localhost/polyropes_new/assets/vendor/bootstrap/css/bootstrap.min.css">
<!-- Custom fonts for this template-->
<link href="http://localhost/polyropes_new/assets/vendor/font-awesome/css/font-awesome.min.css">
<!-- Page level plugin CSS-->
<link href="http://localhost/polyropes_new/assets/vendor/datatables/dataTables.bootstrap4.css">
<!-- Custom styles for this template-->
<link href="http://localhost/polyropes_new/assets/css/sb-admin.css">
</head>
<body class="bg-dark">
<div class="container">
<div class="card card-login mx-auto mt-5">
<div class="card-header">Please enter your login details:</div>
<div class="card-body">
<form>
<div class="form-group">
<label for="name">Username</label>
<input class="form-control" placeholder="User name" name="name" type="text" id="name" autofocus>
</div>
<div class="form-group">
<label for="password">Password</label>
<input class="form-control" id="password" type="password" placeholder="Password" id="password">
</div>
<div>
<input type="submit" name="submit" value="Login" class="btn btn-lg btn-success btn-block">
</div>
</form>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript-->
<script src="http://localhost/polyropes_new/assets/vendor/jquery/jquery.min.js"></script>
<script src="http://localhost/polyropes_new/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="http://localhost/polyropes_new/assets/vendor/jquery-easing/jquery.easing.min.js"></script>
</body>
</html>
This shows all files and CSS have been called correctly as none of them is blank.Please guide me
I have a form made with bootstrap, and a very simple script that post to self, but I can't get it to work, I uploaded to my site, but it is not posting the input fields back in the same page.
here is the script
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Contact Us</title>
<!-- Bootstrap -->
<link href="bootstrap.min.css" rel="stylesheet">
<!-- stylesheet for this form -->
<link href="contact-stylesheet.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="my-form">
<form class="form-horizontal" method="post" action="<?php echo $_SERVER['PHP_SELF'];?>" >
<div class="form-group" id="hori-form">
<label for="inputEmail3" class="col-sm-2 control-label">Name:</label>
<div class="col-sm-5">
<input type="name" class="form-control" id="inputEmail3" placeholder="Name">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Email:</label>
<div class="col-sm-5">
<input type="email" class="form-control" id="inputPassword3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Text:</label>
<div class="col-sm-8">
<textarea class="form-control" rows="7" placeholder="Text"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Send</button>
</div>
</div>
</div>
</form>
<?php
Welcome <?php echo $_POST["name"]; ?><br>
Your email address is: <?php echo $_POST["email"];
?>
<!-- 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>
</html>
You are missing name html attribute for your input tags.
<input type="name" name="name" class="form-control" id="inputEmail3" placeholder="Name">
and this part of your page must change also
Welcome <?php echo $_POST["name"]; ?><br>
Your email address is: <?php echo $_POST["email"];?>