I'm discovering Laravel and VueJs
I just intalled it using laravel installer
I think blade is not working because when i do npm run dev, the welcome.blade.php looks like that:
As you can see, the blade directives appear...
I didn't change the code give but it looks like this:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
<!-- Styles -->
<style>
html, body {
background-color: #fff;
color: #636b6f;
font-family: 'Nunito', sans-serif;
font-weight: 200;
height: 100vh;
margin: 0;
}
.full-height {
height: 100vh;
}
.flex-center {
align-items: center;
display: flex;
justify-content: center;
}
.position-ref {
position: relative;
}
.top-right {
position: absolute;
right: 10px;
top: 18px;
}
.content {
text-align: center;
}
.title {
font-size: 84px;
}
.links > a {
color: #636b6f;
padding: 0 25px;
font-size: 13px;
font-weight: 600;
letter-spacing: .1rem;
text-decoration: none;
text-transform: uppercase;
}
.m-b-md {
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="flex-center position-ref full-height">
#if (Route::has('login'))
<div class="top-right links">
#auth
Home
#else
Login
#if (Route::has('register'))
Register
#endif
#endauth
</div>
#endif
<div class="content">
<div class="title m-b-md">
Laravel
</div>
<div class="links">
Docs
Laracasts
News
Blog
Nova
Forge
Vapor
GitHub
</div>
</div>
</div>
</body>
</html>
If someone have an idea to fix that ;)
Related
I currently have the problem that my maps my 9th map is displayed on two pages although there is still enough space on the first page. Does anyone have a suitable solution to the problem?
I tried anything: page-break-inside, page-break-before, page-break after. Anything does not work.
Picture: https://drive.google.com/drive/my-drive
index.blade snipped:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
#yield('third_party_stylesheets')
#stack('page_css')
<style>
.layout{
width: 100%;
height: 100%;
/*margin: 11mm 20mm;*/
margin-top: 10mm;
margin-bottom: 0;
margin-left: 25px;
}
.box {
/*border: 1px dashed black;*/
display: inline-block;
width: 87mm;
margin-top: -15px;
margin-bottom: 0px;
margin-left: -10px;
margin-right: -1px;;
padding-top: 15px;
}
p {
text-align: right;
}
.card{
width: 85mm;
height: 55mm;
border: 1px solid black;
.pb {
page-break-inside: always;
}
</style>
</head>
<body class="layout">
#for( $i = 0; $i < 10 ; $i++)
<div class="box">
<div class="card">
....
</div>
</div>
#if($i % 2)
<br>
#endif
#if($i % 10 == 9)
<p class="pb" style="display: none;"></p>
#endif
#endfor
</body>
</html>
I'm developing a website that has several pages, and to avoid having to write the entire menu I want to use the php include method. However I am not making the menu appear inside the html file. how do I make the menu appear whenever I call include?
<header>
<nav id="navbar">
<div id="navbar-div">
<span id="navbar-spam">
<h1 id="navbar-logo">
<img src="images/logo.png" alt="" srcset="" class="logo1">
</h1>
</span>
<nav id="menu">
<ul>
<li>home</li>
<li>quem somos</li>
<li>destaques</li>
<li>representantes</li>
<li>clientes</li>
<li>contato</li>
</ul>
</nav>
</div>
</nav>
</header>
style.css
*{
margin: 0;
padding: 0;
}
#font-face {
font-family: 'mandina';
src: url('font/Madina.otf')/*Para navegadores Internet Explorer*/;
font-weight: normal;font-style: normal;
}
#font-face {font-family: 'mandina';
src: url('/font/Madina.ttf') /*Para os demais navegadores*/;
font-weight: normal;
font-style: normal;
}
/* INICIO CABEÇALHO */
header {
width: 100%;
height: 4.5em;
}
#navbar-logo {
margin-left: 0.5em;
width: 17vh;
height: 9vh;
}
#navbar{
background-color: white;
position: fixed;
z-index: 10;
height: 4.5rem;
width: 100rem;
}
#navbar-div {
position: absolute;
width: 100%;
}
#navbar-spam {
position: fixed;
width: 15em;
height: 3.5em;
}
#navbar-logo {
position: absolute;
margin-right: 40rem;
margin-top: 0;
width: 50%;
height: 100%;
text-align: center;
}
#menu {
z-index: 9;
position: fixed;
margin-top: 1.5rem;
margin-left: 28rem;
width: 100%;
height: 4.5rem;
font-weight: bold;
text-transform: uppercase;
}
#menu li{
float: left;
list-style: none;
}
#menu li a {
color: black;
text-decoration: none;
padding: 1.4rem;
}
/* INICIO CORPO DO SITE */
main {
position: relative;
height: 200em;
width: 100%;
background-color: white;
color: black;
}
.design-tec {
font-family: mandina;
font-size: 15vh;
margin-left: 30rem;
margin-top: -20rem;
color: black;
text-shadow: 3px 3px 6px #f3c569;
}
.linha-home {
border: 1px dashed black;
margin-left: 39rem;
margin-top: -0.9rem;
width: 16rem;
}
#img-home {
margin-top: 4rem;
margin-left: 5rem;
width: 55vh;
}
.texto-home {
margin-top: 1rem;
margin-left: 33rem;
font-style: italic;
}
#itens-home {
position: absolute;
margin-left: 33rem;
margin-right: 21rem;
margin-top: 3rem;
font-weight: bold;
}
#ico-catalogo,
#ico-representantes,
#ico-tutoriais {
margin-left: 0.5rem;
width: 8vh;
height: 8vh;
}
#ico-representantes{
margin-left: 1.7rem;
}
#div-catalogo{
position: absolute;
margin-left: 1rem;
}
#div-representantes {
position: absolute;
margin-left: 11rem;
}
#div-tutorial {
position: absolute;
margin-left: 23rem;
}
#ico-catalogo:hover,
#ico-representantes:hover,
#ico-tutoriais:hover{
width: 9vh;
height: 9vh;
transition: 1s;
}
#home{
position: relative;
height: 20%;
width: 100%;
background-color: white;
}
/* INICIO RODAPÉ */
footer {
position: fixed;
background-color: blue;
color: black;
}
This is the index.htm file, which will be the main page
<!DOCTYPE html`
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<?php require "navbar.php" ?>
<main>
<section id="home">
<img src="images/img-home.gif" id="img-home">
<h2>
<p class="design-tec">Design & Tecnologia</p>
</h2>
<hr class="linha-home">
<div class="texto-home">
<p>Modernidade e tecnologia em um produto exclusivo para o seu imóvel!</p>
</div>
<div id="itens-home">
<div id="div-catalogo">
<img src="images/catalogo.svg" id="ico-catalogo">
<p id="Pcatalogo">Catálogo</p>
</div>
<div id="div-representantes">
<img src="images/aperto-de-mao.svg" id="ico-representantes">
<p id="Prepresantantes">Representantes</p>
</div>
<div id="div-tutorial">
<img src="images/mail.svg" id="ico-tutoriais">
<p id="Pcontato">Tutoriais</p>
</div>
</div>
</section>
</main>
<script src="script.js"></script>
</body>
</html>
Just rename your file index.htm to index.php then at the index.php, you can now use a mixture of php and html code.
To include a file inside an html, you can do this:
index.php
<!DOCTYPE html`
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<?php
require "navbar.php";
//or
// require_once "navbar.php"
?>
You can read more about using php on html here.
Note: After changing your extension to .php, you can't run the file without a server unlike with static files such as html or htm.
To do this, you can install a development server on your development environment such as XAMPP.
References to XAMPP can be found here.
I'm creating the layout for export meeting details in PDF. there is a problem during layout. I want to display divs as a column. for example image display: flex not working, I'm trying table, table-cell, table-flex and table-grid but not working. Main content shifts down sidebar length.
My all blade html codes;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,500,700&display=swap" rel="stylesheet">
<style media="screen">
#font-face {font-family: "Roboto-Light"; font-style: normal; font-weight: 300; src: url({{ url('fonts/Roboto-Light.ttf') }})}
#font-face {font-family: "Roboto-Regular"; font-style: normal; font-weight: normal; src: url({{ url('fonts/Roboto-Regular.ttf') }})}
#font-face {font-family: "Roboto-Bold"; font-style: normal; font-weight: bold; src: url({{ url('fonts/Roboto-Bold.ttf') }})}
body { font-family: 'Roboto-Regular'; }
* { margin: 0; padding: 0; }
.sidebar {
position: relative;
left: 0.9cm;
width: 5cm;
}
.page-break-after {
page-break-after: auto;
}
body {
padding-top: 3cm;
padding-bottom: 100px;
}
.wrapper {
position:relative;
width: 21cm;
display: table;
}
</style>
</head>
<body style="background: url({{ url('pdf-export-background.png') }});background-size: 100% 100%;">
<div class="wrapper">
<div class="sidebar" style="">
<p style="text-align:center;font-size:8px;">{{ $meeting['place'] }}</p>
<!-- List Item -->
<p style="margin-top: 15px;">
<h4 style="margin-left:5%;font-family:'Roboto-Bold' !important;font-size:10px;">
<span style="border-bottom: 1px solid #000;">Düzenleyen</span>
</h4>
<p style="padding-left: 5%;">
<span style="font-size:9px;">{{ $meeting['created_user']['name'] }}</span>
<span style="font-size:7px;font-weight:300;line-height:9px;">{{ $meeting['job_title_name'] }}</span>
</p>
</p>
<!--#List Item -->
</div>
<div style="position: relative;width: 5.7cm;">
THE MAIN CONTENT
</div>
</div>
</body>
</html>
Dompdf does not support flexbox as of this writing (current release is 0.8.4). Refer to issue 971 for more information.
You can generate that layout with a variety of stylings, but if your content goes beyond a page in length you'll run into some quirkiness around the Dompdf rendering process. I'd suggest floating the sidebar to the left and set a left margin on the main content.
Something like this:
<div>
<div style="float: left; width: 25%; height: 80%; background-color: #cc6633;"></div>
<div style="margin-left: 35%; width: 65%; height: 80%; background-color: #3366cc;"></div>
</div>
I'm learning Laravel for the first time, just started today. Fresh Laravel install via Composer on LAMPP - Ubuntu. After I run sudo /opt/lampp lampp start in my terminal, I open Chrome and nav to localhost/MYAPP/resources/views/welcome.blade.php. This is the view that is rendered.
The "#" statements (that I assume are specific to Laravel's controllers) are rendered to the screen in the browser and I cannot figure out why this is happening.
Any/all insight is appreciated!
EDIT: As requested here is my welcome.blade.php file:
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
<!-- Styles -->
<style>
html, body {
background-color: #fff;
color: #636b6f;
font-family: 'Raleway', sans-serif;
font-weight: 100;
height: 100vh;
margin: 0;
}
.full-height {
height: 100vh;
}
.flex-center {
align-items: center;
display: flex;
justify-content: center;
}
.position-ref {
position: relative;
}
.top-right {
position: absolute;
right: 10px;
top: 18px;
}
.content {
text-align: center;
}
.title {
font-size: 84px;
}
.links > a {
color: #636b6f;
padding: 0 25px;
font-size: 12px;
font-weight: 600;
letter-spacing: .1rem;
text-decoration: none;
text-transform: uppercase;
}
.m-b-md {
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="flex-center position-ref full-height">
#if (Route::has('login'))
<div class="top-right links">
#auth
Home
#else
Login
Register
#endauth
</div>
#endif
<div class="content">
<div class="title m-b-md">
Laravel
</div>
<div class="links">
Documentation
Laracasts
News
Forge
GitHub
</div>
</div>
</div>
</body>
The # in laravel blade view is injection of some php commends and shortcuts. For example:
#if(condition)
some data
#else
some data
#endif
Is the same as:
<?php if(condition){ ?>
some data
<?php } else { ?>
some data
<?php } ?>
You will find more here: https://laravel.com/docs/5.6/blade
When it comes to Laravel it is a basic so read it carefully.
After a week now of double checking my PATH and versions for everything, I've figured out that I simply needed to navigate to the directory where my application is stored and run the command php artisan serve.
Major props to user Yachi 웃 for his attentive help.
Good day. I recently learn about laravel. Then, i'm trying to fetch data from database (I'm using Sqlsrv) But i face an error
htmlspecialchars() expects parameter 1 to be string, object given
(View: D:\xampp\htdocs\boby\resources\views\welcome.blade.php)
Here is my script
routes/web.php
Route::get('/', function () {
$datauser = DB::table('users')->get();
return view('welcome',compact('datauser'));
});
and my view is like this (like welcome.blade.php)
<!doctype html>
<html lang="{{ config('app.locale') }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
<!-- Styles -->
<style>
html, body {
background-color: #fff;
color: #636b6f;
font-family: 'Raleway', sans-serif;
font-weight: 100;
height: 100vh;
margin: 0;
}
.full-height {
height: 100vh;
}
.flex-center {
align-items: center;
display: flex;
justify-content: center;
}
.position-ref {
position: relative;
}
.top-right {
position: absolute;
right: 10px;
top: 18px;
}
.content {
text-align: center;
}
.title {
font-size: 84px;
}
.links > a {
color: #636b6f;
padding: 0 25px;
font-size: 12px;
font-weight: 600;
letter-spacing: .1rem;
text-decoration: none;
text-transform: uppercase;
}
.m-b-md {
margin-bottom: 30px;
}
</style>
</head>
<body>
<ul>
#foreach ($datauser as $user)
<li> {{ $user }} </li>>
#endforeach
</ul>
</body>
</html>
how can handle this error ? thanks in advance
You can't display an object like that. You need to fetch the properties when displaying.
<li> {{ $user->id }} </li>>
<li> {{ $user->name }} </li>>
<li> {{ $user->email }} </li>>
You can use the {{}} to display object.
in the foreach , $user is an object ,
if you want to show user's email, use it {{ $user->email }}