I want to include a bootstrap template on codeigniter code, so i included the template in views folder and then i called it in controller but i can't see the template in my page
Here's my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootsrtap Free Admin Template - SIMINTA | Admin Dashboad Template</title>
<!-- Core CSS - Include with every page -->
<link href="plugins/bootstrap/bootstrap.css" type="text/css" rel="stylesheet" />
<link href="font-awesome/css/font-awesome.css" type="text/css" rel="stylesheet" />
<link href="plugins/pace/pace-theme-big-counter.css" type="text/css" rel="stylesheet" />
<link href="css/style.css" type="text/css" rel="stylesheet" />
<link href="css/main-style.css" type="text/css" rel="stylesheet" />
</head>
<body class="body-Login-back">
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4 text-center logo-margin ">
<img src="img/logo.png" alt=""/>
</div>
<div class="col-md-4 col-md-offset-4">
<div class="login-panel panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Please Sign In</h3>
</div>
<div class="panel-body">
<form role="form">
<fieldset>
<div class="form-group">
<input class="form-control" placeholder="E-mail" name="email" type="email" autofocus>
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" name="password" type="password" value="">
</div>
<div class="checkbox">
<label>
<input name="remember" type="checkbox" value="Remember Me">Remember Me
</label>
</div>
<!-- Change this to a button or input when using this as a form -->
Login
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- Core Scripts - Include with every page -->
<script src="plugins/jquery-1.10.2.js"></script>
<script src="plugins/bootstrap/bootstrap.min.js"></script>
<script src="plugins/metisMenu/jquery.metisMenu.js"></script>
</body>
</html>
this is login.php (in views folder)
---------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootsrtap Free Admin Template - SIMINTA | Admin Dashboad Template</title>
<!-- Core CSS - Include with every page -->
</head>
Controller
<?php if ( ! defined('BASEPATH')) exit('No direct access allowed');
class Login extends CI_Controller
{
public function index()
{
$this->load->view('login');
}
}
and this is login.php (in controllers folder)
please help me with this problem
Well first off you should all ways have your assets out side of your application folder.
Because the .htaccess file that is inside the application folder blocks that
project >
project > application
project > assets
project > system
project > index.php
project > .htaccess <!-- use a htaccess here for removing index.php
Second set your base_url in config > config.php
// You are recommend to do so in CI 3 + versions
$config['base_url'] = 'http://localhost/yourprojectname/';
Third Auto load the url helper config > autoload.php
$autoload['helper'] = array('url');
Controller Make sure your class and file name first letter only upper
case
As said here http://www.codeigniter.com/user_guide/general/controllers.html#let-s-try-it-hello-world
Filename Example.php
<?php
class Example extends CI_Controller {
public function index() {
$this->load->view('header');
$this->load->view('example');
$this->load->view('footer');
}
}
Then create a header.php and footer.php and example.php view
http://www.codeigniter.com/user_guide/general/views.html#loading-multiple-views
header.php view
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/bootstrap/css/bootstrap.css');?>">
</head>
<body>
example.php view
Any content you need
footer.php view
<script type="text/javascript" src="<?php echo base_url('assets/bootstrap/js/bootstrap.js');?>"></script>
</body>
</html>
This is an example. Make a folder, that called is assets, paste all style, js resources into it.
Please show you console log tab. Example:
Related
So I have started a spring boot project. The HTML loads fine, however, thyme-leaf seems to have trouble loading static files. The two files are in packages such as static.css and static.js. I get an ERR_ABORTED:404 error for loading both files and can not figure out why.
I have already tried changing the path (as suggested in other similar questions) to something like #{css/styles.css} instead of #{/css/styles.css} but that did not work.
Does anyone know if I'm missing something here?
Below is the HTML file:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" th:href="#{/css/styles.css}">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="bg-img">
<div class="content">
<header>Login Form</header>
<form action="#">
<div class="field">
<span class="fa fa-user"></span>
<input type="text" required placeholder="Email or Phone">
</div>
<div class="field space">
<span class="fa fa-lock"></span>
<input type="password" class="pass-key" required placeholder="Password">
<span class="show">SHOW</span>
</div>
<div class="pass">
Forgot Password?
</div>
<div class="field">
<input type="submit" value="LOGIN">
</div>
</form>
<div class="login">Or login with</div>
<div class="links">
<div class="facebook">
<i class="fab fa-facebook-f"><span>Facebook</span></i>
</div>
<div class="instagram">
<i class="fab fa-instagram"><span>Instagram</span></i>
</div>
</div>
<div class="signup">Don't have account?
Signup Now
</div>
</div>
</div>
<script type="text/javascript" th:src="#{/js/loginscript.js}"></script>
</body>
where is your css folder?
css, js should be in static folder
src
main
java
resources
static
css
i18n
img
js
templates
Add this in your head tag:
<link rel="stylesheet" href="../static/css/styles.css" type="text/css" th:href="#{/styles.css}">
Note: Above code will only work if styles.css present in below path:
|--resources
|--static
|--css
|--styles.css
This is here for anyone who finds this, it turns out for the th:href property, I had to give the full path as th:href="#{../static/css/styles.css}". Thanks to everyone who answered!
I have a laravel application.
I am using bootstrap in the frontend alongwith blade templates.
I want to add a background image to my landing page.
I am trying to style the page by putting a background image to the body. But its not working as in the image is not showing
Below is my code
<!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">
<title>Laravel</title>
<!-- Latest compiled and minified CSS -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Arizonia' rel='stylesheet' type='text/css'>
</head>
<style>
body {
background-image: {{url('/images/gym_background.jpg')}};
}
</style>
<body>
#include('partials.header')
<div class="container">
#yield('content')
</div>
</body>
</html>
In My chrome console i don't see any error of not loading the image.
The code for content section
#extends('layouts.master')
#section('content')
<div class="row">
<div class="col-md-12">
<h3>Welcome to your neighourbood Gym</h3>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<h1 class="post-title">Plans</h1>
<p>Plans available in our gym!</p>
<p>Click to view</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-12 text-center">
<h1 class="post-title">Gallery</h1>
<p>Have a look around our gym</p>
<p>Click to view</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-12 text-center">
<h1 class="post-title">Contact us</h1>
<p>Click for more details</p>
</div>
</div>
#endsection
Best Regards,
Saurav
Given the following folder structure:
`/public/images/gym_background.jpg`
Change this:
<style>
body {
background-image: {{url('/images/gym_background.jpg')}};
}
</style>
To this:
<style>
body {
// Add a . in front to look in the right folder + dropping the double {{ }}
background-image: url('./images/gym_background.jpg');
}
</style>
Here is a good read on relative vs absolute paths for the extra curious.
If you don't see the image and there's no 404 error in the network inspector, then probably your image is hidden under some other element that takes all the screen and has solid (white?) background. Try setting the same CSS on div.container, then it should work.
UPD: Scratch that, the problem is curly braces. It will work if you remove those {{ and }}.
I have a fresh installed laravel project with all the components updated.
All I did is tried to add app.js in my welcome.blade.php file, after adding the following I get this error
[Vue warn]: Cannot find element: #app
I followed this thread, but it's not relevant as my script is at the bottom of the page.
https://laracasts.com/discuss/channels/vue/fresh-laravel-setup-and-vue-2-wont-work
Here's my file
<!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">
<title>{{$project}} | {{ $title }}</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
<!-- Styles -->
<link href="/css/app.css" rel="stylesheet" type="text/css"/>
<style>
...
</style>
</head>
<body class="sticky-nav">
<div id="nav">
<div class="display-sm">
<header class="top-header">
<span class="menu-icon">☰</span>
</header>
</div>
<div class="custom-container">
<div id="logo" class="float-left">
<img alt="xyz" src="/images/xyz.png"/><span> xyz</span>
</div>
<div id="btn-project" class="float-right">
<a title="project" href="#" class="btn btn-project">Project</a>
</div>
</div>
</div>
<div class="sub-container">
<h1 id="header-title">{{ $header_title }}</h1>
<h2 id="meta-data"><i class="fa fa"></i>{{$location}} <span id="category"> <i></i>{{$category}} </span></h2>
<div class="clear"></div>
</div>
<script src="/js/app.js"></script>
<script>
var wrap = $(".sticky-nav");
wrap.on("scroll", function (e) {
if (this.scrollTop > 147) {
wrap.find('#nav').addClass("fix-nav");
} else {
wrap.find('#nav').removeClass("fix-nav");
}
});
</script>
</body>
</html>
Error says it all. Vue can't find #app element, so you need to add it:
<div id='app'></div>
https://v2.vuejs.org/v2/guide/
Sometime everything seems got , but we are still getting same error then you have to copy this code and paste in app. blade.
<head>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
.
.
.
.
.
.
</div>
</body>
Verify that your main design file app.blade.php contains a div with the app id just after the <body> tag just like this:
<body>
<div id="app">
.
.
.
</div>
</body>
I'm learning to develop with CodeIgniter and would like a help to know how to properly insert a navbar in a view. I need to know which directory to save the navbar file and how to call this file in a view.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title><?php echo $produto['nome']; ?></title>
<!-- link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" -->
<link rel="stylesheet" href="<?php echo base_url("assets/css/bootstrap.min.css"); ?>">
</head>
<body>
I need navbar here (This is a home view)
<div class="container">
<div class="row">
<div class="col-md-12">
<?php echo $produto['nome']; ?>
<?php echo $produto['preco']; ?>
<?php echo $produto['descricao']; ?>
</div>
</div>
</div>
</body>
</html>
You can try create a template folder inside views folder and put some files like header.php, nav.php, footer.php. Inside your main view you can use like $this->load->view('template/nav);.
UPDATED
This is the typical of header.php
<!DOCTYPE html>
<html>
<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">
...
<title>Put_your_title_here</title>
<link rel="stylesheet" href="<?php echo base_url('css/bootstrap.min.css'); ?>">
...
</head>
<body>
<!-- depends on your template design -->
<div class="dashboard-wrapper">
<div class="main-content">
<?php $this->load->view('template/nav.php'); ?>
footer.php
<footer>Some footer content</footer>
</div><!-- /.main-content -->
</div><!-- /.dashboard-wrapper -->
<!-- Core Scripts - Include with every page -->
<script src="<?php echo base_url('js/jquery.min.js'); ?>"></script>
<script src="<?php echo base_url('js/bootstrap.min.js'); ?>"></script>
</body>
</html>
nav.php
<div class="navbar navbar-default" role="navigation">
...
</div>
Let say that your Controller (in this case Welcome.php) load a view like this:
<?php defined('BASEPATH') OR exit('No direct script access allowed');
class Welcome extends CI_Controller
{
public function __construct()
{
parent::__construct();
}
public function home()
{
$data['message'] = 'Welcome to My Website';
$this->load->view('welcome', $data);
}
}
welcome.php
<?php $this->load->view('template/header'); ?>
<p><?php echo $message; ?></p>
<?php $this->load->view('template/header'); ?>
NOTE Avoid echoing something directly from controller except some particular situation that force you to do so
so I need to include a couple of files from a subdomain from the main domain (my subdomain is admin.mydomain.com and targets to => mydomain.com/admin/), but I can't get to.
My public_html structure is
-admincp (empty, this is the subdomain)
-css
-js
-includes
-fonts
-images
I need to include all the css, js and some php files (which are in /includes/) in the subdomain index but for some reason it retrieves nothing using "/css/xxx.css".
I've tried using "/home/user/public_html/includes" (or css, or js) and actually worked, but the problem then is the file I need to include (the header for example) is like this:
<?php
session_start();
?>
<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<meta name="description" content="<?php echo $meta_description ?>" />
<meta name="author" content="Gaspar Dip" />
<title><?php echo $page_title ?></title>
<link rel="shortcut icon" href="/images/favicon.ico">
<link rel="stylesheet" href="/css/metro-bootstrap.min.css">
<link rel="stylesheet" href="/css/metro-bootstrap-responsive.min.css">
<link rel="stylesheet" href="/css/iconFont.min.css">
</head>
<body class="metro">
<nav class="navigation-bar light">
<div class="navigation-bar-content">
<span class="icon-stats-2"></span> Estudio Benintendi
<span class="element-divider"></span>
<a class="pull-menu" href="#"></a>
<ul class="element-menu">
<li>Inicio<li>
<li>Acerca del estudio<li>
<li>Enviar curriculum<li>
<li>Contactenos</li>
</ul>
<div class="no-tablet-portrait">
<span class="element-divider"></span>
<div class="element input-element">
<form>
<div class="input-control text">
<input type="text" placeholder="Buscar...">
<button class="btn-search"></button>
</div>
</form>
</div>
<?php if(!isset($_SESSION["username"])){ ?>
<ul class="element-menu place-right">
<li>Iniciar sesión</li>
<li>Registrarse</li>
</ul>
<?php }else{ ?>
<div class="element place-right">
<a class="dropdown-toggle" href="#">
<span class="icon-cog"></span>
</a>
<ul class="dropdown-menu place-right" data-role="dropdown">
<li>Products</li>
<li>Download</li>
<li>Support</li>
<li>Salir</li>
</ul>
</div>
<span class="element-divider place-right"></span>
<button class="element place-right">
<span class="icon-user-3"></span>
<?php echo $_SESSION["username"]; ?>
</button>
<?php } ?>
<span class="element-divider place-right"></span>
</div>
</div>
</nav>
<div class="container">
So those links targetting the .css files actually go to admincp.mydomain.com/css/xxx.css instead of mydomain.com/css/xxx.css
Did I explain myself?
Possibly giving the absolute path can make difference.
I mean full path to the css link something like
<link rel="stylesheet" href="<?php echo FULL_PATH_TO_CSS; ?>/css/xxx.css"/>
Can you try this?
<link rel="stylesheet" href="../css/xxx.css"/>
This is not tested.