I have an HTML file with HTML code. How can I change from the HTML file to a PHP file?
The following is the HTML code:
<html>
<head>
<title>Instascan – Demo</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webrtc-adapter/3.3.3/adapter.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/schmich/instascan-builds/master/instascan.min.js"></script>
</head>
<body>
<div id="app">
<div class="sidebar">
<section class="scans">
<h2>Scans</h2>
<ul v-if="scans.length === 0">
<li class="empty">No scans yet</li>
</ul>
<transition-group name="scans" tag="ul">
<li v-for="scan in scans" :key="scan.date" :title="scan.content">{{ scan.content }}</li>
</transition-group>
</section>
</div>
<div class="preview-container">
<video id="preview"></video>
</div>
</div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
Change your HTML file extension. For example, index.html will be index.php.
Just change file extension .html to .php (index.html to index.php).
If you want to add any PHP code, you have to use the <?php and ?> tags.
In your case, just change the extension of your filename. Example: yourfilename.html to yourfilename.php.
Related
I am currently creating my first website and i have some trouble, i want to include a page between a navbar and a vertical bar, and i want to change to page to include when a click on a button of my vertical bar. Here is a screen :
Screen of my Website
And here is my code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Memeable | The 1# world meme generator</title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap-social.css" rel="stylesheet">
</head>
<body>
<div >
<?php
include("head.php");
?>
</div>
</body>
Here is my head.php :
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Memeable</a>
</div>
</div>
</nav>
<div class="vertical-menu">
Premier
Deuxième
Troisième
Quatrième
</div>
I'm sure that the solution is easy but i don't see how to do.
Thank you for your help !
To show your content in your "content area" use include. You provide the file name you want to load as an argument. Use an array to specify all the valid files you want to use, then use a $_GET parameter to select the correct sub page to load.
<?php
$files = array();
$files['home'] = 'home.php';
$files['contact'] = 'contact.php';
$files['whatever'] = 'you_want.php';
?>
Then later at the location where you want the content to be displayed use the following code:
<?php
if (isset($_GET['nav'], $files[$_GET['nav']])) {
include $files[$_GET['nav']];
} else {
include $files['home']; // default page
}
?>
To "call" the right sub page add the ?nav=... query parameter to your URLs like
<ul>
<li>Home</li>
<li>Contact</li>
</ul>
I have a PHP file that involved with codemirror which works great, but I want each text area to load the code from other file using PHP like index.php, main.css, main.js, and show preview from all of those files to combines.
My question is that how can write that code inside of each text area to link another page! I have tried to put <?php include('css/main.css'); ?> statement inside of one of text area for css and is not working.
Please see see full codes..
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.19.0/codemirror.css"> <link rel="stylesheet" href="css/style.css">
<div id="wrap">
<!-- Code Editors --> <section id="code_editors">
<div id="html" class="code_box">
<h3>HTML</h3>
<textarea name="html"></textarea>
</div>
<div id="css" class="code_box">
<h3>CSS</h3>
<textarea name="css"></textarea>
</div>
<div id="js" class="code_box">
<h3>JavaScript</h3>
<textarea name="js"></textarea>
</div>
</section>
<!-- Sandboxing --> <section id="output">
<iframe></iframe> </section> </div>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.19.0/codemirror.js"></script>
<!-- For HTML/XML --> <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.19.0/mode/xml/xml.js">/script><script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.19.0/mode/htmlmixed/htmlmixed.js"></script>
<!-- For CSS --> <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.16.0/mode/css/css.js"></script>
<!-- For JS --> <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.19.0/mode/javascript/javascript.js"></script> <script src="js/js.js"></script>
Many thanks.
What you are doing is trying to include the css file contents without link tag. Replace <link rel="stylesheet" type="text/css" href="css/main.css"> instead of <?php include('css/main.css'); ?>.
My objection is to create a full example out of the Laravel Toolbox Kit.
I want to establish a pageset of a Controller passing data to a blade site when a correctly routed address is called.
Here is my code:
routes.php
Route::get('/game/start', function () {
return view('start');
});
GameController.php
class GameController extends BaseController
{
use AuthorizesRequests, DispatchesJobs, ValidatesRequests;
public function Start()
{
$file = fopen("levels.dat", "r");
if($file == false)
return view('start', ['levels' => "Couldn't open file"];
$filesize = filesize($file);
$filetext = fread($file, $filesize);
$fclose($file);
$levels = str_getcsv($filetext,",");
return view('start', ['levels' => $levels,
'levelsLength' => count($levels)]);
}
}
A game.blade.php. Here also the JS references are bleeding.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Conway's Game Of Life - Game</title>
<!-- CSS And JavaScript -->
<script type="text/javascript" src="/../../vendor/twitter/bootstrap/dist/js/bootstrap.min.js">
</script>
<script type="text/javascript" src="/../../vendor/components/jquery/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="/../../vendor/twitter/bootstrap/dist/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<nav class="navbar navbar-default">
<!-- Navbar Contents -->
</nav>
</div>
#yield('content')
</body>
</html>
Then start.blade.php
#extends('layouts.game')
#section('content')
<h2>#yield('Title')</h2>
<h3>#yield('Message')</h3>
<div id="first-col">
Please select the layout you want to play with.
<form id="layout-selector" method="POST">
<!-- Watch if this dropdownSelectList works -->
<label for="selectorDropDown"> Please select the layout you want to play with. </label>
<select name="dropDownList">
<!-- This {{$level}} is a string of the Name of the Level -->
#for($i = 0; $i < $levelsLength; $i++)
<option value="{{$levels[$i]}}">{{$levels[$i]}}</option>
#endfor
</select>
<input type="submit" action="public/game/level"/>
</form>
</div>
<div id="second-col">
<img id="lightUp" style="display:none" src="../img/lightUp30.png"/>
<img id="putOut" style="display:none" src="../img/putOut30.png" />
<canvas id="createCanvas" style="">
Sorry, your browser doesn't support Canvas! Try it in another type!
</canvas>
<script type="text/javascript" src="../js/startGameScript.js"></script>
</div>
#endsection
So I would like to have a working site,since now it doesn't render. Thanks for your appreciated time and help. Any further explanation for request!
You just can't #yield inside a #section
Replace this lines
<h2>#yield('Title')</h2>
<h3>#yield('Message')</h3>
with this
<h2>{{ $Title }}</h2>
<h3>{{ $Message }}</h3>
Assuming you have $Title & $Message in your blade template.
Now you can also extend a template
<!-- Stored in resources/views/layouts/master.blade.php -->
<html>
<head>
<title>App Name - #yield('title')</title>
</head>
<body>
#section('sidebar')
This is the master sidebar.
#show
<div class="container">
#yield('content')
</div>
</body>
</html>
<!-- Stored in resources/views/child.blade.php -->
#extends('layouts.master')
#section('title', 'Page Title')
#section('sidebar')
#parent
<p>This is appended to the master sidebar.</p>
#endsection
#section('content')
<p>This is my body content.</p>
#endsection
In this example, the sidebar section is utilizing the #parent directive to append (rather than overwriting) content to the layout's sidebar. The #parent directive will be replaced by the content of the layout when the view is rendered.
More details can be found here https://laravel.com/docs/5.1/blade#template-inheritance
You will first have to fix this block:
<script type="text/javascript" src="/../../vendor/twitter/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/../../vendor/components/jquery/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="/../../vendor/twitter/bootstrap/dist/css/bootstrap.min.css" />
Files inside laravel's vendor folder cannot be referenced from blade.
Link to hosted libraries instead:
Bootstrap
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
For latest versions:
https://www.bootstrapcdn.com/
https://developers.google.com/speed/libraries/
I want to merge two different html files into one,
html1.html
<html>
<head>
<link href="blah.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1 id="logo">
<span class="test1">Test text</span>
</h1>
</body>
</html>
html2.html
<html>
<head>
<script src="blah.js"></script>
</head>
<body>
<h1 id="logo">
<span>Test text</span>
<div class="test2">teststetset</div>
</h1>
</body>
</html>
I want to take these two files and make a master file that would look like this:
<html>
<head>
<link href="blah.css" rel="stylesheet" type="text/css" />
<script src="blah.js"></script>
</head>
<body>
<span class="test1">Test text</span>
<div class="test2">teststetset</div>
</body>
</html>
I want to know is this possible using php or any library or using Linux command?
The file location of the image is correct and it displays on localhost however doesn't online, how would i be able to get this to work?
I have tried changing the images from png to jpg and using different images and changing the file locations and then updating that on the code however it still does not display the image
<!DOCTYPE HTML>
<html>
<head>
<title>KMS</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="UTF-8">
<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript" src="http://s.sharethis.com/loader.js"></script>
</head>
<body id="wrapper">
<div id="header">
<!--Logo-->
<div id="Logo">
</div>
<!--Logo-->
<!--Menu Buttons-->
<?php include 'menu.php';?>
<!--Menu Buttons-->
</div>
<div id="hContent">
<!--Frames--====================================================================-->
<div id="hFrames">
<!--Information go below-->
<div id="infoCon1">
<img id="kms_img" src="Images/Kmsproductsinformation.jpg" style="width:850px;"/>
<b />
<b />
</div>
<!--Information end-->
</div>
</div>
</div>
<!--
footer
-->
</body>
</html>
Try <img id="kms_img" src="images/kmsproductsinformation.jpg" style="width:850px;"/> and ensure that your images directory and kmsproductsinformation.jpg file are in lowercase.
You've got something funny going on with your DIVS. You have what looks like two additional close DIV tags () towards the end of your file - I'd start by fixing those up.
Having said that it also shouldn't really matter if it's localhost or not, or whether it's jpg or png but PNG would be better if you're setting it to a non-100% width.
Try something basic without all the DIVS or your menu.php file and see if that works.
<!DOCTYPE HTML>
<html>
<head>
<title>KMS</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="UTF-8">
<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript" src="http://s.sharethis.com/loader.js"></script>
</head>
<body id="wrapper">
<img id="kms_img" src="Images/Kmsproductsinformation.jpg" />
</body>
</html>