I have a function in my admin controller called "login" which uses the 'login.php' view in application/views/admin/. I have the 'header.php' and 'footer.php' views included at the top and bottom of this file as shown below:
<?php include ('/application/views/layout/header.php'); ?>
The header and footer are included correctly in all my other views, but when included in the 'login.php' view, the asset files are not found. Here is my 'header.php' view:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="./application/assets/bootstrap/css/bootstrap.min.css" >
<link rel="stylesheet" type="text/css" href="./application/assets/style.css" >
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="./application/assets/bootstrap/js/bootstrap.min.js" ></script>
<title><?php echo $page_title; ?></title>
</head>
<body>
<div class="container-fluid text-center">
<div class="row">
<div class="span12">
<img src="./application/assets/signature.jpg" class="img-responsive center-block" style="margin-top: 20px;">
</div>
</div>
</div>
Here is the file structure of my application:
application
-+assets
---+css
------style.css
-+controllers
----admin.php
----page.php
-+views
---+layout
------header.php
------footer.php
---+admin
------home.php
------login.php
----home.php
I have used firebug to try and solve the problem, and the console is giving me a 404 error. It is adding the controller name 'Admin' into the filepath of the css file for some reason as seen below, as well as my .js files and the image:
/my_project/admin/application/assets
Any ideas as to why this could be? I have used mod_rewrite on the project in my .htaccess file.
For including header and footer I think better way this answer:
adding header and footer codeigniter to controller
...
And for to refer to CSS and JS file use CodeIgniter URL helper. You must load the helper And use this helper:
https://ellislab.com/codeigniter/user-guide/helpers/url_helper.html.
Config base_url() in config.php file. Then link to your CSS and JS like this answer:
Code Igniter simple base url css
If you use Codeigniter framework I recomend to use a standart function loading view instead include() function.
For example, Codeigniter support function View() to load your HTML code at web page.
Call function like as:
$this->load->view(template);
At your case you need to put next code at your controller file login.php, where you want load header template. Look like as:
$this->load->view("layout/header.php");
Also, dont use incude(); The better write: include_once();
If you will work furthe with inheritance classes you have problems.
Read more about here: enter link description here
Related
I have an HTML "chunk" of code with HTML and JS in it so I could easily include it with PHP. I also want it to have CSS styling but according to standards you are not "allowed" to do that - while it works it makes the page invalid. CSS is only allowed in <head> and not in the middle of the page (not untill HTML5.2 at least). So I thought about appending similarly named but separate .css file in the head, but with PHP and not JS (for performance sake)
<head>
<!-- PHP needs to include button.css here AFTER $App->INC("button"); has been called -->
</head>
<body>
<?php
$App->INC("button");
//This basically does 'require_once("button")';
//What do I need to add to the INC method to include css file in the head?
//Similar to $("head").append() but with PHP
?>
</body>
css file with the same name should be added to a <head> section.
PS:
This may seem as a design flaw and may as well be but here is the thought behind this.
I have a piece of code that when included in the right place of the
body generates a "loading screen" (or other UI elements that
can't/shouldn't be nested anywhere else but in the <body> of
the website.
It's got styling in a separate file
I send it to other user
They include it with a method of an "App" class which only does two
things: includes the file itself and css file nearby
Then they only use 1 line of code to put it where they want it and
not in 2-3 other places so the code is more manageable
Example:
You may try this:
<?php
ob_start();
$App->INC("button");
$button = ob_get_clean();
?>
<head>
<!-- Do your inclue here -->
</head>
<body>
<?= $button ?>
</body>
You can put the ob_start() / ob_get_clean() stuff inside button.php and return the content via your INC() method. Then you can save the content directly into $button like this: $button = $App->INC("button");.
But your example looks like a design problem. However I hope this will do the trick.
This could be a possible redesign:
<?php
$App->loadModule('button'); // Loads the module, the module registers stylesheets and content.
$App->loadModule('another_module'); // Load more modules ...
<head>
<?php $App->renderModuleStylesheets(); ?>
</head>
<body>
<?php $App->renderModuleContent(); ?>
</body>
If you include the CSS directly in the component itself, or expect the component to dynamically load the relevant CSS, then it could be quite difficult to maintain or customize. I am not saying you shouldn't go this route but be careful about asking your components to do too much.
A hook system as pointed out in the comments is one way to handle this.
Another simple way is to provide default styling which users can override. This is probably the simplest way to allow different styling for each component.
<head>
<!-- Provide some defaults. Users should not customize this one. -->
<link rel="stylesheet" type="text/css" href="default.css">
<!-- User's can customize this file to override the default styling.-->
<link rel="stylesheet" type="text/css" href="custom.css">
</head>
<body>
<?php $App->INC("button"); ?>
</body>
button.php - is only responsible for rendering a button. The separate CSS files will actually style it.
<?php
echo <input type"submit" class="button" value="Submit">
default.css - applies default styling
.button {
color: blue;
}
custom.css - overrides the default styling
.button {
color: red;
}
Final note, you may also want to look into using a main template file which sub-views inherit. This helps to reduce the number of full HTML files which link to your CSS files. The idea is to have 1 (or a few) template files that views inject themselves into. Here's some pseudo code.
frontend.php
<html>
<head>
<!-- Links to CSS files here. -->
</head>
<body>
<?php $placeholder('body'); ?>
</body>
Login.php
<?php inherits('frontend.php')->body; ?>
<form id="login">
...
Register.php
<?php inherits('frontend.php')->body; ?>
<form id="register">
...
About-Us.php
<?php inherits('frontend.php')->body; ?>
<p>About Us</p>
...
In my project that is developed in laravel, i am trying to use a style.css file using blade engine. but it's not working for me anybody have better idea let me know.
Here is my code sample
<link href="{{ asset('/css/style.css')}}" rel="stylesheet" type="text/css">
it's tag is not working but when i'm us following it's working.
<link href="{{ asset('public/css/style.css')}}" rel="stylesheet" type="text/css">
now i want to now best practices of adding css files and how to include other files. like i've file header.blade.php it hold all css file link now i want to include header.blade.php in home.blade.php file both file in view directory.
Placed your css file inside laravel_project/public/css folder and use the link it into your view like:
<link href="{{asset('css/style.css')}}" rel="stylesheet" type="text/css"/>
I think this will help you Thanks.
I think your style.css is stored in public/css directory thats why it allow second you have provided.
And now your header.blade.php holds all your css files so you have to follow laravel's structure in layout if u have app.blade.php or any layout then its perfect otherwise you have to make it own
Sample app.blade.php (stored at views/layout/)
<!DOCTYPE html>
<html>
#include('layouts.partials.header') // path to your header.blade.php
#yield('content')
#include('layouts.partials.footer') // path to your footer.blade.php
</html>
Now this is your layout and you can use your layout and your header as well as footer in your view file like i am creating one blog_list.blade.php which is stored at views directory
blog_list.blade.php
#extends('layouts.app') // we are extending app.blade.php
#section('content')
// here whatever your content
#endsection
You can find more details on laravel's official site laravel-5.4
I hope it helps you. thank you.
I want to add a css file to my template. I created the template.php into the folder : kohana-v3.3.5\application\views. Into this folder, I created an other folder called "css" and inside it, there is my styles.css with some code.
For now, my template file is :
<html>
<head>
<link href="/css/bootstrap-3.3.6-dist/css/bootstrap.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<div class="row">
<div class="col-md-12 banner">
Persyst
</div>
</div>
<?php echo $content; ?>
</body>
</html>
I don't understand why the links for my css files aren't working.
I saw something with HTML:style() but it doesn't work either.
Thanks for your help !
Using HTML::style() is a good idea. The reason why it fails is because you put the assets folder inside the template folder. The latter is outside of web access (or should be) and is only used internally.
Kohana routes everything through the index.php file, so this is the level your stylesheets, scripts and images belong.
<html>
<head>
<?php
print HTML::style('vendor/bootstrap-3.3.6-dist/css/bootstrap.css') ."\n"
. HTML::style('assets/css/styles.css');
?>
With a directory structure like
application
modules
system
assets
css
js
vendor
bootstrap
I'm trying to include an html page (like header), but I can't get the include to work.
I want to create a page like header and footer, and want these pages to include on every html page in application just like we do in PHP. We create a page and include it using include or require.
Like if i have these lines of code
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Angular Demo</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css.map">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
<script src="js/jquery-2.1.4.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/custom.js"></script>
</head>
Now i want to include these line on every HTML page.I don't want to write these lines on every page.
Is it possible to do this in Angular js using ng-include or something else.
I have tried this
<div ng-include src="'include/header.html'"></div>
If i use ng-include it only include some piece of code in div. But how can i use it like header and footer to include on every page.
For general templating you should use ngRoute & ngView : have an html page laying your base site include a view that ngRoute populates with specific content depending on the url.
Try ng-view and routeProvider to populate the ng-view. As shown here:
http://viralpatel.net/blogs/angularjs-routing-and-views-tutorial-with-example/
So in general what will happen is that you will have a index.html it will have some static part and some dynamic html part of the code. The static part will be your header and footer and the dynamic part will be controlled by the ng-view and routeProvider.
The static part will remain the same throughout every page.
Generally angularJS handles this kind of behavior with directives. Example header directive HTML:
<div id="banner" class="page-header">
<div class="row text-center">
<div class="col-lg-10"></div>
<h3> {{ content.title }} </h3>
<small>{{ content.strapline }}</small>
</div>
</div>
Example header directive javascript file:
(function () {
angular
.module('flightApp')
.directive('pageHeader', pageHeader);
function pageHeader () {
return {
restrict: 'EA',
scope: {
content : '=content'
},
templateUrl: '/common/directives/pageHeader/pageHeader.template.html'
};
}
})();
You need to include this in your index file. You don't need to include the HTML, the JS in the directive will reference your HTML file, so just add this to your index.html:
<script src="/common/directives/pageHeader/pageHeader.directive.js"></script>
I'm passing in the content attribute on html. This can be bound to parent scope variables like this:
<page-header content="vm.header"></page-header>
Where in your parent controller you define the vm.header variable:
vm.header = {
title : 'Flight App (angular edition!)',
strapline: ''
};
And now you have a reusable generic header element! You can define headers or footers this way in a single line, and you can make the content vary based on where the directive is and what is using it. If you have any issues using this, just let me know. Directives are somewhat confusing at first but become a very powerful tool when you get familiar with AngularJS.
I intent to create a template PHP file, this template will only serve the design, not the content. The purpose is to decrease the development time in a sense that when creating a new PHP file or new module, I can only need to concentrate on the main function of that PHP file not the design. Once I created the new file using the template, it should be able to display the consistent design and serve its specific function.
The issue is that I am not sure on how to make the design of the template works and applied to all of the new files created regardless of the location (as long as it is within the root directory).
As an example:
root directory (www.example.com): /
homepage (www.example.com/index.php): /index.php
css file: /style/style.css
template file: /template.php
newly created file (www.example.com/subone/find/css/file.php): /subone/find/css/file.php
another newly created file (www.example.com/subtwo/locate/css.php): /subtwo/locate/css.php
Content of the homepage (which is created base on the template.php, but the CSS file location is hard coded):
<html>
<head>
<title>Testing</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
<div id="header">logo and login form goes here
<div class="nav"> navigation goes here;</div>
</div>
<div id="main">main content goes here;</div>
<div id="footer">footer goes here; </div>
</body>
</html>
but, when I created a new file, /subone/find/css/file.php
the location of the css must be changed and specified manually, like this:
<html>
<head>
<title>Testing</title>
<link rel="stylesheet" type="text/css" href="../../../style/style.css" />
</head>
<body>
<div id="header">logo and login form goes here
<div class="nav"> navigation goes here</div>
</div>
<div id="main">main content goes here;</div>
<div id="footer">footer goes here;</div>
</body>
</html>
So, what I want to achieve is that, when creating a new file (/subone/find/css/file.php), I don't need to do anything, I can straight away concentrate on the main section:
<html>
<head>
<title>Testing</title>
...style.css is handled automatically
</head>
<body>
<div id="header">logo and login form goes here
<div class="nav"> navigation goes here</div>
</div>
<div id="main">main content goes here;
<?php
//I can continue to edit the file from this line onward
echo "I am concentrating on the main function of file.php right now!!";
?>
</div>
<div id="footer">footer goes here;</div>
</body>
</html>
example page can be seen at (only the desired design): neoborn.kodingen.com
I accept any answers as long as it can achieve my intention (template).
Thank you :)
Why don't you use absolute paths when referring to CSS files and other resources in your template file?
For example:
<link rel="stylesheet" type="text/css" href="/style/style.css" />
There are 2 options,
Use absolute paths for your css files <link rel=stylesheet href="/style/style.css">
Use HTML's <base> element to cause all relative paths on the page relate to it.
I would use a easy to install template engine. That will help speed up development and still give you the freedom to do whatever PHP you like.
Try http://www.raintpl.com/ that should be quick and easy for you to install and get back to coding the pages. If you include it in your PHP inc folder, it will be available for every PHP file you create. So you won't need to add an include line at the top of each PHP file.
Index.php
<?php define('BASE_URL', 'http://localhost'); ?>
Template.php
<link rel="stylsheet" type="text/css" href="<?php echo BASE_URL; ?>/style/style.css ?>" />