Phalcon: how to require a .php file in my volt file? - phalcon

I am using Phalcon for the 1st time and I would like to migrate the content of an index.php file from my website into the index.volt file (in app/views).
So I tried to use require 'header.php' that I normally use in my index.php in the index.volt, like so:
index.volt
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Phalcon PHP Framework</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="../../public/css/index.css">
</head>
<?php require 'layouts/header.php' ?>
<body onload="document.body.classList.add('loaded')" id="cool">
<div class="container-fluid" style="height: 400px;">
{{ content() }}
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA-5rrW4FY43z63mHhwpv7BIZE3bv8Ws_A&libraries=places"></script>
<script type="text/javascript" src="../../public/js/index.js"></script>
</body>
</html>
But I get this error:
Warning: require(layouts/header.php): failed to open stream: No such
file or directory in
C:\xampp\htdocs\care\cache\c__xampp_htdocs_care_app_views_index.volt.php
on line 14
Fatal error: require(): Failed opening required 'layouts/header.php'
(include_path='C:\xampp\php\PEAR') in
C:\xampp\htdocs\care\cache\c__xampp_htdocs_care_app_views_index.volt.php
on line 14
So is there a particular way to include php file with phalcon ?
Thank you

Related

Vue js change structure dist

I need to change the structure of my files when I put in production :
default :
-dist
--css
--fonts
--img
--js
--favicon.ico
--index.html
and i want like this :
-dist
--index.html
--app
---css
---fonts
---img
---js
---favicon.ico
I try to change directly the html in index.html
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="icon" href="app/favicon.ico">
<title>Roquette</title>
<script defer="defer" src="app/js/chunk-vendors.6e8aa085.js"></script>
<script defer="defer" src="app/js/app.4955a200.js"></script>
<link href="app/css/app.d0b83381.css" rel="stylesheet">
</head>
<body>
<noscript><strong>We're sorry but serveur-roquette doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div>
</body>
</html>
But it doesn't work there must be some paths missing somewhere

I got 'is not defined' when trying to access class from a CDN loaded on Vue js

While trying to use Twilio TaskRouter JS SDK on Vue JS, that you have load through CDN.
<!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.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<script src="https://sdk.twilio.com/js/taskrouter/v1.21/taskrouter.min.js" integrity="sha384-5fq+0qjayReAreRyHy38VpD3Gr9R2OYIzonwIkoGI4M9dhfKW6RWeRnZjfwSrpN8" crossorigin="anonymous"></script>
</body>
</html>
I want to init my worker like this:
export const initWorker = (token) => {
return new Twilio.TaskRouter.Worker(token);
}
but it's giving me this error: 'Twilio' is not defined. but it's actually working and returning the Worker object. is there way to ignore or to say Vue js that I'm expecting Twilio?
Found a fix, you have to tell eslint that you'll have this as global, there are two ways to go:
add this before your variable call:
/* global Twilio */
or edit your eslint config:
'globals': {
'Twilio': 'readable'
},

How to solve Vue-Cli Javascript disabled error

I want to build vue-cli 3 to my computer. I've created my first folder with vue-cli control panel than I faced with a blank page. In my index.html, I've discovered <strong>We're sorry but vue-test doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript> error. How to fix that and create a working properly folder instead?
<!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.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>vue-test</title>
</head>
<body>
<noscript>
<strong>We're sorry but vue-test doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

Problems with gulp-mocha-phantomjs after upgrade version 0.8.0

I have a few problems after having upgraded to gulp-mocha-phantomjs Version 0.8.0:
1) Error when running against remote by url:
When running my tests against a remote URL, I get the following error:
ReferenceError: Can't find variable: Mocha
at browser-shim.js:27
All required files in runner.html seem to be available and the test do work as expected in an actual browser like FF or Chrome.
runner.html:
<!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>Mocha Test Runner</title>
<link rel="stylesheet" href="HTTP://localhost:7777/q/p/lj_unittest/test/mocha.css">
<link rel="stylesheet" href="HTTP://localhost:7777/q/p/lj_unittest/css/core.css">
</head>
<body>
<div id="mocha"></div>
<div id="fixture" style="display:none;">
<div id="charset_ascii"> !"#$%&'()*+,-./0123456789:;<=>?#ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~</div>
<div id="charset_other">ÄäÆæß</div>
</div>
<script src="HTTP://localhost:7777/q/p/lj_unittest/js/core.js"></script>
<script src="HTTP://localhost:7777/q/p/lj_unittest/test/mocha.js"></script>
<script src="HTTP://localhost:7777/q/p/lj_unittest/test/chai.js"></script>
<script src="HTTP://localhost:7777/q/p/lj_unittest/test/chai-datetime.js"></script>
<script src="HTTP://localhost:7777/q/p/lj_unittest/test/sinon.js"></script>
<script>
mocha.setup("bdd");
</script>
<script src="HTTP://localhost:7777/q/p/lj_unittest/test/backend/ods/charset_backend.js"></script>
<script src="HTTP://localhost:7777/q/p/lj_unittest/test/backend/ods/ods.log_backend.js"></script>
<script src="HTTP://localhost:7777/q/p/lj_unittest/test/backend/ods/date.js"></script>
<script>
mocha.run();
</script>
</body>
</html>
Gulpfile.js:
gulp.task('test:backend:ODS', function (/callback/) {
var stream = mochaPhantomJS({'reporter': 'spec'});
stream.write({path: config.URL_ROOT + '/TEST_WEB_ODS.main'});
stream.end();
return stream;
});
2) Strange warnings in some (but not all) of the runner.html based tests:
Unsafe JavaScript attempt to access frame with URL about:blank from frame with URL file:///D:/MyDev/ljs_app/trunk/periscope/build/node_modules/gulp-mocha-phant
mjs/node_modules/mocha-phantomjs-core/mocha-phantomjs-core.js. Domains, protocols and ports must match.
runner.html:
<!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>Mocha Test Runner</title>
<link rel="stylesheet" href="../../../libs/mocha/mocha.css">
<link rel="stylesheet" href="../../../dist/css/core.css">
</head>
<body>
<div id="mocha"></div>
<div id="fixture" style="display:none;"></div>
<script src="../../../dist/js/core.js"></script>
<script src="../../../libs/mocha/mocha.js"></script>
<script src="../../../libs/chai/chai.js"></script>
<script src="../../../libs/chai/chai-datetime.js"></script>
<script src="../../../libs/sinon/sinon.js"></script>
<script>
mocha.setup('bdd');
</script>
<!-- START of actual unit test scripts -->
<script src="./json.js"></script>
<script src="./moment.js"></script>
<script src="./underscore.js"></script>
<!-- END of actual unit test scripts -->
<script>
mocha.run();
</script>
</body>
</html>
Gulpfile.js:
gulp.task('test:frontend:lib', function (/*callback*/) {
return gulp.src('test/frontend/lib/runner.html').pipe(mochaPhantomJS({'reporter': 'spec'}));
});
Any help is appreciated!
Load mocha.js first. Your own comment is correct.
Related:
ReferenceError: Can't find variable: Mocha when running test · Issue #7 · nathanboktae/mocha-phantomjs-core

Polymer 0.4 JSONP

I'm playing around with Polymer 0.4. I'm trying to do a jsonp request using polymer-jsonp component which I've installed using bower.
But it's not working, it looks to me like the polymer-jsonp component is not compatible with Polymer 0.4 and it has been deprecated according to this https://github.com/PolymerLabs/polymer-jsonp/releases/tag/0.3.0
I can see in my network panel that the polymer-jsonp comoponent is being correctly imported but even though it has the "auto" parameter it does not make the request at all. I'm not running it throug any JS code, I'm expecting it to run automatically because of the auto param and to bind it results to the results param value.
May I wait for a compatible version to be released or is there any way to use it or some alternative?
EDIT:
Here is an example:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Polymer WebApp</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild-->
<script src="bower_components/platform/platform.js"></script>
<!-- build:vulcanized elements/elements.vulcanized.html -->
<link rel="import" href="bower_components/core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="bower_components/core-toolbar/core-toolbar.html">
<link rel="import" href="bower_components/polymer-jsonp/polymer-jsonp.html">
<link rel="import" href="elements/elements.html">
<!-- endbuild-->
<style>
#drawer {
background-color: #CCC;
}
#main {
background-color: #EBFA6F;
}
#main site-table {
padding: 20px;
}
</style>
</head>
<body unresolved>
<template>
<polymer-jsonp url="http://127.0.0.1/abmonitor-server/Ajax.class.php?callback=" auto response="{{ sitelist }}"></polymer-jsonp>
</template>
<core-drawer-panel>
<div id="drawer" drawer>
<sites-menu></sites-menu>
</div>
<div id="main" main>
<header>
<core-toolbar>Toolbar</core-toolbar>
</header>
<site-table></site-table>
</div>
</core-drawer-panel>
<!-- build:js scripts/app.js -->
<script src="scripts/app.js"></script>
<!-- endbuild-->
</body>
</html>
Thank you very much.
The jsonp element really should be updated for core, it's just a nuisance that is hasn't been yet. However, I looked at the code, and I believe the old one should work just fine. It's possible you just have a simple problem in your setup.
I can see in the browser console that it is not being imported.
Make sure you have a <link> tag in your application that imports the element. Probably something like:
<link rel="import" href="bower_components/polymer-jsonp/polymer-jsonp.html>