How to add pure static pages in a cakephp app? - cakephp

I have a cakephp app which I need to redirect some of its urls to some pure html pages. I can not change these html files as a layout and .ctp file. how can I control the routes of urls like:
mysite.com/en/something
to show some html files in the host?

For your route : mysite.com/en/something
Open you routes file located at app/Config/routes.php
Add this line
Router::connect('/en/something', array('controller'=>'pages','action'=>'something'));
In your Pages controller located at app/Controller/PagesController.php Add action to handle this route
class PagesController extends AppController{
public function something(){
//To disable the layout set it to false
$this->Layout = false;
}
}
And then, put your html code in the view located at app/View/Pages/something.ctp
<html>
<head>
<!-- your page headers -->
</head>
<body>
<!-- your body content -->
</body>
</html>

Related

Can't embed Facebook post into Next JS generated page

I am trying to embed a public FB post into the main page of my application. I am following FB guide and it's pretty simple. It works when I do it in .html file, but doesn't with Next JS.
Basically, instructions are that you need to insert this right after the body opening tag
<div id="fb-root"></div>
<script async defer crossorigin="anonymous"
src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&autoLogAppEvents=1&version=v9.0&appId={appId}" nonce={someNonce}"></script>
and then you put the other part wherever you want.
I even created a custom _document.js file and included this script, I can also see it in the browser. But the post does not get loaded.
Anyone had this kind of issue?
Assuming you already have the JS SDK loaded in your document, like you mentioned (you might also load the script on-demand via JavaScript if preferred).
// pages/_document
class MyDocument extends Document {
render() {
return (
<Html lang="en">
<!-- additional code -->
<body>
<!-- additional code -->
<script
async
defer
src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"
/>
</body>
</Html>
);
}
}
You can then render a Facebook post inside one of your components with:
<div
className="fb-post"
data-href="https://www.facebook.com/20531316728/posts/10154009990506729/"
/>
For further details refer to the official Embedded Posts documentation.

Controlling html outside the ngview when page changes

I have a single page angular application and this is my index.html file:
<html ng-app="myApp">
...
<div id="bash">...</div>
...
<div id="menu">...</div>
...
<div ng-view></div>
...
</html>
Then I have a home controller with its template and an about us controller with its own template as well. And I want their templates to come up in the ng-view which is happening already but I want the #bash to only come up when the url ends with /home and hide when the url ends with anything else.
I can't do that through the home controller because it's outside the ng-view
and I can't do this through a normal JS file as well because the application loads once.
I can go through each controller and have a js function that changes #bash's css and turns display into false but I'd rather just have a condition in one place and I'm sure it's doable. Any ideas?
Why couldn't you do that from the home controller?
<div id="bash" ng-show="bashShown()">...</div>
...
$scope.bashShown = function() {
return $location.path().endsWith('/home');
};

The Kendo UI directives require jQuery to be available before AngularJS. Please include jquery before angular in the document

I have a Mvc with angular application.
There are two layout files :
Loginlayout: - Default layout
MasterLayout:
When click the Movie button , call the Movie Controller and Movie action.
public ActionResult Movie()
{
return View();
}
Its using mainlayout file:
In Mainlayout file i have mentioned
<script src="
https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
#Scripts.Render("~/bundles/bootstrap")
<script src="https://code.angularjs.org/1.3.8/angular.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
<script src="https://code.angularjs.org/1.3.8/angular-sanitize.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script>
In page refresh , scripts get orderly loaded,
while click the movie button. i am getting this error.
I have attached screenshot below:
while click the Movie button scripts order
Error getting when click the Movie button
When Page refresh scripts loaded
i had the same issue, i was loading jquery twice,
for other possible answers this question

AngularJs (1.X) Include Partial Template

I've this in my main layout file
<body>
<header id="header" ng-controller="HeaderController"></header>
<div class="container" ng-view></div>
I've a header.html partial template in my directory structure.
How to include this template in my app? I thought angular automatically includes the template after processing the controller, but it doesnt work.
The header node should be replaced with the content of this file.
One way of including templates/html fragments from external files is to use the ng-include directive (doc).
<ng-include src="'/path/to/the/header.html'"></ng-include>
or
<div ng-include src="'/path/to/the/header.html'"></div>
From Angular 2, ngInclude has been removed and custom directives are preferred. This is the way I come up with
Define the main component for your app, which link to the master page
#View({
templateUrl: 'client/app/layout/main.html',
directives: [ROUTER_DIRECTIVES, Navigation, Footer]
})
#Component({selector: 'app'})
#RouteConfig(
routerConfig
)
class MainComponent {
}
And this is the main template
<!---- Navigation bar ---->
<navigation></navigation>
<!----/ Navigation bar ---->
<!---- Main Part ---->
<router-outlet>
</router-outlet>
<!----/ Main Part ---->
<!---- Footer ---->
<footer></footer>
<!----/ Footer ---->
Define a base.html, which will contain the body tag and the app tag
<body> <app>Loading ...</app> </body>
Now, final step is defining the components for Navigation and Footer like the MainComponent, which point to your partial templates

Kendo UI with CakePHP 2.x

I am developing an appliction in CakePHP 2.x. and want to use Kendo UI. How can I do that and use it in my app? Can anyone tell me if it is possible and if so how?
My Controller:
class ClientDetailsController extends AppController {
var $name = "ClientDetails";
public $helpers = array('js');
public $components = array('RequestHandler');
function index(){
$this->loadModel('User');
$userdata = $this->User->find('all');
$this->set('user',$userdata);
}
}
My View:
<h1> User in Index Pages of the Client Details .... </h1>
<?php
//pr($user);
echo $this->Html->link('Personal Detail',array('controller'=>'ClientDetails','action'=>'add'));
?>
<div id="calendar" ></div>
<div id="info" > </div>
<?php
echo $this->Html->link('Room Details ',array('controller'=>'RoomDetails','action'=>'index'));
?>
I am not familiar with Kendo, however, I have used Knockout.js extensively with CakePHP. If you've used jQuery with CakePHP, the implementation with Kendo should be no different. I took a quick look and they appear to be similar in implementation, so this is what I would do.
Here in the Kendo documentation it says to simply link the necessary files. I don't see how this is any different than jQuery. Once the files are loaded you should be able to use them.
For example, use the following code at the top of your view (but obviously with your paths)
<!-- Common Kendo UI Web CSS -->
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<!-- Default Kendo UI Web theme CSS -->
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<!-- jQuery JavaScript -->
<script src="js/jquery.min.js"></script>
<!-- Kendo UI Web combined JavaScript -->
<script src="js/kendo.web.min.js"></script>
//rest of your code here
Now you can use Kendo however you like. In their documentation they list the datepicker, such as
<input id="datepicker" />
<script>
$(function() {
// Initialize the Kendo DatePicker by calling the kendoDatePicker jQuery plugin
$("#datepicker").kendoDatePicker();
});
</script>
So, if you had a date input, just put put the ID of that input where "#datepicker" is listed in the example above.

Resources