Create an external file for side menu - javascript

How do I create an external file for my side menu?
<a class="active" href="C.html" style="font-size: 1.1em;font-weight: 900;">C Programming</a>
C++
C#
Go
Java
JavaScript
PHP
Python
Ruby
Swift
Currently I have these kind of links in every file and the code is just getting too much. Is there a way to create an external file for the menu items?
I tried this but the problem is class="active". I want to highlight a menu item when my menu item is in index.php
I Know how to achieve this when my menu is in each individual HTML file but how do I do that when it's in external PHP file ?
Index.php
<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS/Tags.css">
<link rel="stylesheet" type="text/css" href="CSS/Nav.css">
<link rel="stylesheet" type="text/css" href="CSS/Card.css">
<link rel="stylesheet" type="text/css" href="CSS/Buttons.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="sidenav">
<h1>&nbspOthers</h1>
MS Excel
MS PowerPoint
MS Word
WordPress
</div>
</body>
</html>
Main file
<?php include('index.html'); ?>

You should NOT use javascript to include your menu .
you can use PHP to simply include your menu ( but i sugget header ) file to your page :
<?php include('/template/header.html'); ?>
or you can use pre processors like Gulp :
##include('./template/header.html')
var fileinclude = require('gulp-file-include'),
gulp = require('gulp');
gulp.task('fileinclude', function() {
gulp.src(['index.html'])
.pipe(fileinclude({
prefix: '##',
basepath: '#file'
}))
.pipe(gulp.dest('./'));
});
or Pug or Grunt and ......
About your problem in comments . lets say you are in your main folder and you have this 3 files :
index.php
header.html
homepage.html
footer.html
index.php should be like this :
<?php
include('header.html');
include('hompage.html');
include('footer.html');
?>
and then in your browsers you should open index.php .
** don't use index.html and index.php in the same time .
if it didn't work . you should get error in your index.php file .
when your code works . i suggest you to use readfile() instead of include . if your another files are just html and not have any php codes in it .

As pointed out by Abolfazl Ghaemi :
You should NOT use javascript to include your menu . you can use PHP to simply include your menu ( but i sugget header ) file to your page :
<?php include('/template/header.html'); ?>
The Gulp/Grunt solution is fine but I'll stick with the <?php include(); ?> solution for your problem.
Does the hosting machine speak PHP ?
If browsers can read HTML just fine to give you a webpage, they can't read PHP. Instead, PHP need to be executed by something on the hosting machine and you will need a PHP interpreter for that like Apache.
If you didn't already, I strongly recommend you to install it or even a full AMP stack.
PHP in HTML files won't work
You need to make sure your file using PHP instructions are .php files. Otherwise, the code in your <?php ?> tag (the PHP code) won't be interpreted at all.
Make sure your main file is a .php file.
Are you calling the correct file ?
Also, you need to be sure the file name you are including is correct. The content as shown in your question is
Main file
<?php include('index.html'); ?>
but your file is actually index.php not index.html.
HTML is prettier with CSS
If you want to "highlight" the item with active class, you will need CSS. You can quickly add CSS in your file with a <style> tag. See the example below.
<ul>
<li>Not highlighted</li>
<li>Still not highlighted</li>
<li class="active">Highlighted ! Spotlight's on me baby !</li>
<li>Not highlighted</li>
</ul>
<style>
.active {
color: red;
font-weight: bold;
}
</style>

Related

Include JavaScript files to the document head with php

I'm creating a blog where I included header.php(Header, included in every page). Header contains a section where all the scripts (Scripts that will need in every pages) will be included.
header.php
<!DOCTYPE html>
<html>
<head>
<!-- Scripts Section -->
<script src="example01.js"></script>
<script src="example02.js"></script>
<title>Demo</title>
</head>
<body>
<p>Blog</p>
But in a specific page, I've to include a specific script (file.js named).
index.php
<?php
include('header.php');
importjs('file.js'); /* Any Function To Import JavaScript*/
?>
If I include the JavaScript file here then it'll be included in body not the scripts section in the header. I don't know how to create that function. So please tell me how to create that function. create function in header.php and please first include the header before using function.
Thank You
I think, you should to write your line code like this example:
<?php int a; ?>
<script type="text/javascript" src="file.js" />
<?php int b; ?>

dynamic php header file with dynamic .js and .css include

I would like to do a dynamic include of my .css and .js file within the head tags in my header.php that depend on the current .php file that is open. So it will save some loading time if the .js or .css file is not needed for the current .php page.
So I thought I check the current url if it includes (strpos) a spicific string (e.g. "mycollection.php") and if yes echo the <link> and <script> tags to include the .css or .js files for the current, opened php file. But it seems to be hard to do a clean script this way. Does anyone has a clean, short and better solution for this problem?
Thank you in advance!
Try code below :
<!DOCTYPE html>
<html>
<head>
<?php
$get_url=$_SERVER['REQUEST_URI'];
$get_extension=explode('/',$get_url);
$get_extension_php=end($get_extension);
if($get_extension_php=='mycollection.php')
{
echo '<link href="your.css"/>';
echo '<script src="your.js"></script>';
}
?>
</head>
<body>
</body>
</html>
Hope it helps you
I used it before but not in the link but before the include of the header and it was like that
if (!isset($css){ echo "<link></link>;}
and at the header of the page if I didn't need to include the css file I just declare the variable $css = ''; and here we go hope this what you were asking for

Loading CSS/JS files when redirecting to next view

I want my users to be able to click a button on the front-end of my website, and be redirected to my page-login.php.
I'm pretty much doing it, but I'm missing some things, because it doesn't load my CSS or JS files. Even though if I set that page into my main page, it will load everything alright.
This is the error message:
GET http://localhost/projeto/index.php/favicon.ico 404 (Not Found).
This happens to CSS, JS files, images, etc.
First of all:
I think that I need to insert my controller and view on the routes page, am I right? If so, how?
The way I call my Controller is messing up the way the page appears. What's the right way?
This is my code:
Main page HTML:
href="index.php/login_controller"
login_controller:
public function index (){
$this->load->view('Main/page_login');
}
So, what am I missing? Is anything that I said true?
Find the config.php file in the /application/config folder. Edit this file and find:
$config['base_url'] =
You should add here correct path. In your current situation you have to add: http://localhost/projeto/
so this line must be:
$config['base_url'] = 'http://localhost/projeto/';
You should include the URL helper into your autoload configuration. /application/config/autoload.php add 'url' into $autoload['helper'] array:
$autoload['helper'] = array( 'url');
after that you can refer your CSS, img, JS and other files with base_url() function. For example:
<link rel="shortcut icon" type="image/png" href="<?php echo base_url();?>/favicon.png"/>
or
<link rel="stylesheet" href="<?php echo base_url('favicon.png');?>" type="text/css" />
redirect(base_url() . 'login_controller/index', 'refresh');

PHP: How do I can access .js and .csss in Web dir from my Module in yii2?

I've an application build in Yii2 framework, and I've develop the application in backend side, but know I want to copy them become a module.
This my application dir
backend
--modules
--pstk
--controllers
--ValidationController.php
--DefaultController.php
--InterviewController.php
--StudentController.php
--SiteController.php
--UsersController.php
--models
--Validation.php
--Interview.php
--Student.php
--Users.php
--views
--validation
--_form.php
--view.php
--index.php
--update.php
--create.php
--interview
--student
--users
--Module.php
--web
--css
--manual_general.css
--js
--upload_header.js
--style
For example I've successfully run view.php from the module in browser, but the module can't access the .css and .js from backend/web/.
So the view displayed, but it's view mashed-up and all button didn't do any action when clicked.
Anyone know why the module didn't access the manual_general.css and upload_header.js from backend/web/? and how I can solve this problem?
Any help, will be appreciated. Thanks :)
EDITED:
This is the code in mi view.php to connect to .js and .css
<link rel="stylesheet" type="text/css" href="../../../../web/css/manual_general.css">
<script type="text/javascript" src="../../../../web/js/upload_header.js"></script>
Try using yii\helpers\Url::to, like:
<link rel="stylesheet" type="text/css" href="<?= Url::to('#web/css/manual_general.css') ?>">
<script type="text/javascript" src="<?= Url::to('#web/js/upload_header.js') ?>"></script>
Alternatively, in view.php you may do (assuming $this is your View instance):
<?php $this->registerCssFile('#web/css/manual_general.css'); ?>
<?php $this->registerJsFile('#web/js/upload_header.js'); ?>

linking css files in php

I am new to php and i am working on a project i am facing some problems with linking css and js files.
Now when the project is executed,First index.php loads (located in root directory) which includes home.php and everything in it is executed correctly.
But as soon as you click on 'about' link on the 'home page' ,the page is redirected to about.php( which is located inside Presentation/about.php )here the css and js linking fails.......
On execution of index.php it takes css link successfully (the link is as follows)
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
but later when the page is redirected to about.php it expects the link to be
<link href="../css/bootstrap-theme.min.css" rel="stylesheet">
and i am using a common file for these links, i kept all links in header.php(located in Presentation/Template/header.php)
I have also defined all paths in config.php(located in inc/config.php)
i have defined the path in config.php as follows
// SITE_ROOT contains the full path to the RichTongue folder
define('SITE_ROOT', dirname(dirname(__FILE__)));
// Application directories
define('PRESENTATION_DIR', SITE_ROOT . '/Presentation/');
define('TEMPLATE_DIR', PRESENTATION_DIR.'Template/');
define('BUSINESS_DIR', SITE_ROOT . '/Business/');
define('CSS_DIR', SITE_ROOT. '/css/');
define('FONT_DIR', SITE_ROOT . '/fonts/');
define('IMAGE', SITE_ROOT . '/images/');
define('JS', SITE_ROOT . '/js/');
so i tried linking css in the following way
<link href="<?php echo CSS_DIR ?>bootstrap.min.css" rel="stylesheet" >
now the above code gives me an error in chrome which says
Not allowed to load local resource: file:///C:/xampp/htdocs/RichTongue/css/bootstrap.min.css
home.php:13
now the path in the error above(file:///C:/xampp/htdocs/RichTongue/css/bootstrap.min.css) is correct but it doesnt load the file and gives the error (error specified above)
Q)What should i do? what is the correct way of linking css and js files in php?
need help
set URl path for SITE_ROOT
if ur project path is C:/xampp/htdocs/RichTongue/css/bootstrap.min.css
so change with below line
define('SITE_ROOT', 'http://localhost/RichTongue');
Link your css and other ressources with an absolute path seems to be the easy solution for you.
Absolute path is from the root dir of your website : C:/xampp/htdocs/RichTongue
instead of file:///C:/xampp/htdocs/RichTongue/css/bootstrap.min.css you can use /css/bootstrap.min.css
so you have to modify
define('CSS_DIR', SITE_ROOT. '/css/');
to
define('CSS_DIR', '/css/');
same for other ressources (js, font, etc.)
Exemple result :
<link href="/css/bootstrap-theme.min.css" rel="stylesheet">
Say if you have a folder called css you can use real path like this:
define('CSS_DIR', realpath(dirname(__FILE__).'/css'));
Then you would use that constant path like this:
echo CSS_DIR."/style.css";
Try to use it like that way:
$SITE_FOLDER_NAME = "demo/";
define('SITEURL', 'http://'.$_SERVER['SERVER_NAME'].'/'.$SITE_FOLDER_NAME);
define('SITEURL_CSS', SITEURL.'css/');
./assets/CSS/filename.css
Did the job for me.

Categories