I am using PHP (DOMDocument and DOMXPath classes to be more precise) to modify the content of an HTML file (for the moment I just change the title in the head tag and the first element of the body which is an h1).
The functionality is there meaning that I am able to modify what I desire into the document but the output is not keeping the indentation of the original file.
What solutions I found online are referring to XML, having to no effect when it comes to HTML.
My question is how can I keep my original indentation after using DOMXPath? It is even possible using this alone or I should consider some 3rd party library?
My PHP code snippet:
<?php
$dom = new DOMDocument;
$dom->loadHTMLFile($dst . '/index.html');
$xpath = new DOMXPath($dom);
$title_tag = $xpath->query('/html/head/title')->item(0);
$title_tag->nodeValue = $_POST['website-title'];
$body_tag = $xpath->query('/html/body/h1')->item(0);
$body_tag->nodeValue = $_POST['website-title'];
$dom->saveHTMLFile($dst . '/index.html');
?>
Original HTML:
<!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></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5shiv.min.js"></script>
<script type="text/javascript" src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello world!</h1>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>
Output HTML :
<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Test Website</title><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"><link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css"><link rel="icon" type="image/x-icon" href="favicon.ico"><!--[if lt IE 9]>
<script type="text/javascript" src="js/html5shiv.min.js"></script>
<script type="text/javascript" src="js/respond.min.js"></script>
<![endif]--></head><body>
<h1>Test Website</h1>
<script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/bootstrap.min.js"></script></body></html>
EDIT: After using $dom->formatOutput = true; (thank you PeeHaa for this) before saving the HTML file, the output is the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test Website</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5shiv.min.js"></script>
<script type="text/javascript" src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Test Website</h1>
<script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>
Related
I'm working on a Laravel project which uses Webflow's CSS framework rather than the default bootstrap framework. It works great for most pages, but I do have a 'profile' page where the CSS does not work at all. I found out it's because the route for the page uses a variable, it looks like this:
Route::get('/chum/{id}', 'App\Http\Controllers\ProfilesController#display');
The function:
public function display($id){
$users = User::findOrFail($id);
$following = $users->followings->count();
$followers = $users->followers->count();
return view('profile', [
'users' => $users,
'following' => $following,
'followers' => $followers
]);
As you can see you go to the URL along with the id of the user's profile and it should bring you there. But for some reason the fact that you're adding that variable to the end of the URL causes the CSS to not work at all. If it helps at all these are the stylesheets and javascript files I'm using in the boilerplate.
<!DOCTYPE html><!-- This site was created in Webflow. http://www.webflow.com -->
<!-- Last Published: Sun Nov 29 2020 00:43:15 GMT+0000 (Coordinated Universal Time) -->
<html data-wf-page="5fc2087d6594016e2f088aed" data-wf-site="5fc06e9787e537386fa53575">
<head>
<meta charset="utf-8">
<title>Profile</title>
<meta content="Profile" property="og:title">
<meta content="Profile" property="twitter:title">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="Webflow" name="generator">
<link href="css/normalize.css" rel="stylesheet" type="text/css">
<link href="css/webflow.css" rel="stylesheet" type="text/css">
<link href="css/cascade-ui.webflow.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script>
<script type="text/javascript">
WebFont.load({
google: {
families: ["Courier Prime:regular,italic,700,700italic"]
}
});
</script>
<!-- [if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script><![endif] -->
<script type="text/javascript">
! function(o, c) {
var n = c.documentElement,
t = " w-mod-";
n.className += t + "js", ("ontouchstart" in o || o.DocumentTouch && c instanceof DocumentTouch) && (n.className += t + "touch")
}(window, document);
</script>
<link href="images/favicon.ico" rel="shortcut icon" type="image/x-icon">
<link href="images/webclip.png" rel="apple-touch-icon">
</head>
<body>
(Content would go here.)
<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=5fc06e9787e537386fa53575" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="js/webflow.js" type="text/javascript"></script>
<!-- [if lte IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif] -->
</body>
</html>
You should change the path/url of your asset to root folder of your site. Maybe just need / at beginning. change
<link href="css/normalize.css" rel="stylesheet" type="text/css">
<link href="css/webflow.css" rel="stylesheet" type="text/css">
<link href="css/cascade-ui.webflow.css" rel="stylesheet" type="text/css">
to
<link href="/css/normalize.css" rel="stylesheet" type="text/css">
<link href="/css/webflow.css" rel="stylesheet" type="text/css">
<link href="/css/cascade-ui.webflow.css" rel="stylesheet" type="text/css">
or you can also change with asset helper function of laravel to add your full URL of the current host. like
<link href="{{asset('css/normalize.css')}}" rel="stylesheet" type="text/css">
{{asset('css/normalize.css')}} will be https://yourhost.com/css/normalize.css
In my localhost the program runs well, but when I deploy it to heroku it doesn't show anything Like this and this is my folder This. Here my index code:
<?php
session_start();
?>
<!DOCTYPE html>
<html lang="ina">
<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>Lovanto Blog</title>
<link href="css/bootstrap-4.0.0.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<link href="css/modal.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<link rel="icon" href="icon.ico" type="image/x-icon" />
</head>
<body>
<?php
require 'vendor/autoload.php';
require 'cloudinary/vendor/autoload.php';
require 'cloudinary/config.php';
include 'conn.php';
include 'code/clock.php';
include 'view/header.php';
include 'view/body.php';
include 'view/footer.php';
?>
</body>
</html>
And this is my Procfile
web: vendor/bin/heroku-php-apache2
Yield functions doesn't load particular sections in other files.
Route
Route::get('/', function () {
return view('add-listing');
});
add-listing.blade.php
#extends('layout')
#section('body')
This is add-listing page
#stop
header.blade.php
#extends('layout')
#section('header')
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>Find Do Responsive Directory Template</title>
<link rel="stylesheet" type="text/css" href="css/master.css">
<link rel="stylesheet" type="text/css" href="css/color-green.css">
<link rel="stylesheet" type="text/css" href="css/app.css">
<link rel="shortcut icon" href="images/short_icon.png">
#stop
layout.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
#yield('header')
</head>
<body>
#yield('body')
</body>
When I run this only the #section('body') content is loading. It doesn't load the #section('header'). Why is that?
You may use #include('header') in layout :
<!DOCTYPE html>
<html lang="en">
<head>
#include('header')
</head>
<body>
#yield('body')
</body>
header.blade.php :
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>Find Do Responsive Directory Template</title>
<link rel="stylesheet" type="text/css" href="css/master.css">
<link rel="stylesheet" type="text/css" href="css/color-green.css">
<link rel="stylesheet" type="text/css" href="css/app.css">
<link rel="shortcut icon" href="images/short_icon.png">
In this example you call add-listing.blade.php and in this file just you said call layout.blade so your blades don't call header.blade just prepare a section for get header contents and you don't call header.blade in your flow.
Yield is such as a variable that can be set by section:
#yield('header') ~ echo $header
#section('header')
header value is here
#endsection
So $header = header value is here.
When I use pgp require it moves the head content on the included file into the body tags, I've explored questions somewhat related to my problem but none have solved my problem.
index.php:
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>
<?php
require '/home/sethfreeman/public_html/subdomains/gwd/navigation/header/header.html';
?>
Included File:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://sethjfreeman.com/subdomains/gwd/assets/css/header.css" type="text/css">
<link rel="stylesheet" href="http://sethjfreeman.com/subdomains/gwd/assets/libs/bootstrap/css/bootstrap.css" media="screen">
<link rel="stylesheet" href="http://sethjfreeman.com/subdomains/gwd/assets/libs/bootstrap/css/bootstrap-responsive.css" media="screen">
</head>
<body>
<div class="container"></div>
<script src="http://sethjfreeman.com/subdomains/gwd/assets/js/jquery-3.1.1.js"></script>
<script src="http://sethjfreeman.com/subdomains/gwd/assets/libs/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Chrome Output:
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://sethjfreeman.com/subdomains/gwd/assets/css/header.css" type="text/css">
<link rel="stylesheet" href="http://sethjfreeman.com/subdomains/gwd/assets/libs/bootstrap/css/bootstrap.css" media="screen">
<link rel="stylesheet" href="http://sethjfreeman.com/subdomains/gwd/assets/libs/bootstrap/css/bootstrap-responsive.css" media="screen">
<div class="container"></div>
<script src="http://sethjfreeman.com/subdomains/gwd/assets/js/jquery-3.1.1.js"></script>
<script src="http://sethjfreeman.com/subdomains/gwd/assets/libs/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
"Require isn't smart. It's simply going to dump the contents of the required file where it's invoked. If you want some code in the head portion, put that in a separate file and require it in the correct place." - Major Productions LLC
To close this question.
Good afternoon everyone. I'm stuck on including a file that has all of my 'head' information in it. I wanted to break down my page so it's simpler and less complicated. in my index.php file i did this;
<?php
include 'Resources/includes/head.php';
?>
It finds the file and i know this because in dreamweaver when i go on my index page it comes up as a tab underneath it. However when i view my index page on the local server, it's as if none of the styles or scripts have been applied to the page. This is the code that my head.php file has in it.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="" />
<meta name="keywords" content=""/>
<link rel="shortcut icon" href="../images/design/icon.png" type="image/x-icon"/>
<link rel="stylesheet" href="../css/style.css" type="text/css" media="screen"/>
<script src="../js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="../js/scripts.js" type="text/javascript"></script>
</head>
You may try something like this by using a base path
<?php
$basepath="http://www.mysite.com/path_to_theme/";
?>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="" />
<meta name="keywords" content=""/>
<link rel="shortcut icon" href="<?php echo $basepath; ?>/images/design/icon.png" type="image/x-icon"/>
<link rel="stylesheet" href="<?php echo $basepath; ?>/css/style.css" type="text/css" media="screen"/>
<script src="<?php echo $basepath; ?>/js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="<?php echo $basepath; ?>/js/scripts.js" type="text/javascript"></script>
</head>