templating system with zf2? - doctrine-orm

we are planing to create a CMS with zf2 and doctrine orm .
actually we are concern about our cms templating
we want our system works with several templates and easily change between themes via admin
and creating a new templates should be easy for end-users developers
we want an advice or suggest for how to build templating system that :
there is a core module and there a lot sub modules with their own phtml
so where to store theme1 phtml and where to store theme2 phtmls ...
any suggest or advice please
thanks

I encourage you to take a look at Twig, its the best template engine I have seen so far :) It does take some time to learn Twig syntax, but its well worthy if you look at what you get :)
I cant yet write comments, so I wrote this as an answare.
Hope this helps. Trust me, the Twig is the way to go. Joust look at his documentation for more specific details how to use it!
EDIT:
The problem you are trying to solve has nothing to do with template engine. You can do that with any template engine. You can do it even with plain PHP if you want.
I built web application where users can register, get their own sub domain, and there they can build their webpage. Change theme, edit text, add pages. Simple CMS functionality.
The easiest way to do this is to have themes folder, where you would store themes, like this:
themes/
- themeBlue
- css/
- images/
- js/
- html or views/
- themeRose
...
Now this is where you would place all your themes, every theme has its own folder with images, css, js files...
And then you would have users, and every user would be able to choose and change theme.
That information would be stored in database. You need to store that user Jack is using themeBlue. You can do that as you want. You can event put this in users table like user_theme column.
Now when someone visits site, you first query database to see what theme is that user or creator of web using. And then you load all that files from current theme folder. And populate html files with data stored in database like in any other CMS.
This is the simplest implementation. You could for example, store css and html files in database :)
Hope this answers your question.
Good luck with that, I almost gone mad building my system :) I ended up with writing my own PHP MVC Framework joust to accomplish what I wanted.

if you activate another module in the application.config.php which has the same views and layouts (same folder structure and filenames) it's viewscripts and layouts will automatically be used when it's loaded after your core module.
so you could simply make your application.config.php dynamic to load the active template module which only contains the view folder. this would be a simple and effective solution without any other libraries.
additionally you can use an asset manager like assetic to also provide images, css etc. inside of your (template-)modules. (have a look at zf2-assetic-module, I wrote my own assetize-module based on assetic to fit my needs...)

Sina,
I do this in my Application->Module.php onBootstrap
$ss = $serviceManager->get('application_settings_service');
$settings = $ss->loadSettings();
$serviceManager->get('translator');
$templatePathResolver = $serviceManager->get('Zend\View\Resolver\TemplatePathStack');
$templatePathResolver->setPaths(array(__DIR__ . '/view/'.$settings['theme'])); // here is your skin name
$viewModel = $application->getMvcEvent()->getViewModel();
$viewModel->themeurl = 'theme/'.$settings['theme'].'/';
In this situation I have this structure in my view folder
view/
default/
application/
error/
layout/
zfcuser/
red/
application/
error/
layout/
zfcuser/
The $viewmodel above injects a variable into the layout for the themeurl in the public_html folder /theme/red/ with all assets for red
Access in layout.phtml -> themeurl;?> in a viewscript layout()->themeurl;?>
I am still working out my Dynamic Views. Right now I have a BaseController and all my ActionControllers extend it. It has a render() function that builds the required views but not sure its going to be scalable hoping to try some placeholder ideas.
application_settings_service is a Settings Service that gets settings for whatever domain was used to call the system and builds an array accessible via any service aware part of the site. Thats a whole different post and it may or may not rub MVC peeps the wrong way
I know your question is marked answered just thought I would share
Eric

Related

Integrate SASS/SCSS on Ember Project with POD structure

I just want to ask what is the best approach to integrate sass/scss on ember project?
Currently my project is in pod structure and I just import style.scss on main app.scss under styles folder.
Is it fine or there is a better approach?
--- app
---- pods
------- home
---------- template.hbs
---------- controller.js
---------- style.scss
---- styles
------- app.scss
Then in app.scss styles imported look like this
#import "./app/pods/home/style.scss";
I haven't used pods in years - because (like expecting controllers to be removed) - I was told that there was going to be a new file layout system. Since hearing that / I've heard bits and pieces of conversation that lead me to believe that pods aren't really a go-to for new projects.
That being said, I share your desire to have a nice file structure. I'd love to 'drag' a folder from one project to another / and just have all the parts of the component copy over.
Since we have the app.scss - (you said you're using sass) - / that kinda acts as the index.
I include resets and mixins and a bunch of stuff for setup. - so, that's not really podish... and maybe there are 'page' level kinda layout... which doesn't really fit either... - so, what it comes down to is really 'components', right?
ember-component-css is pretty cool - but it also has some opinions that could clash.
There's this - https://github.com/justtal/ember-cli-sass-pods - but it's 4 years old / (but so are pods) - so, it might still work great.
Because there isn't a really clear path here... I just create a component folder in styles/components/component-name.styl - and then in my styles/components.styl I #import 'component-name.styl - and then in my app.styl I import the components...
In my case / I actually like to use the cascade - and I need the files to all to be combined - in order. I can't have some of it in the vendor file.
It's not ideal (just because I have to create each file explicitly and register it) - but I can't afford to just keep wishing there was a better file layout.
Instead of fuzzy searching component-name > template
I just search template > component-name
¯\_(ツ)_/¯
I wonder which style will cause me less pain in future transitions. They'll offer codemods to help / but they can't account for unique configurations.
I'd suggest asking this in the official discuss forum. You'll get the real answers there. : )
https://discuss.emberjs.com/
app/styles directory, is the home for stylesheets like CSS, SASS, or LESS.
Folders like vendor and public that can also hold many other files of the developer's choice.
So in your case if you wish to have separate scss file for each pod,
you can put it in the place as you mentioned. (else)
have it under app/styles/pod1.scss and import it under .ember-cli-build.js -> app.import('app/styles/pod1.scss')
[References]
You can get the detailed view of Project layouts, Stylesheet compilation, Assets and dependencies below
Project layouts
Stylesheet compilation
Assets and dependencies
Besides ember-component-css there is ember-css-modules.
Both addons try to achieve about the same goal, however I really prefer ember-css-modules.
That addon has an addon called ember-css-modules-sass. Both together will easily allow you to write one sass file per component.
You just place a styles.scss file in your component pod (app/components/my-component/styles.scss and then use local-class="my-class" instead of class="my-class" in your template.
Your classes in your scss will be automatically namespaces.

Adding an image to a toolbar in a Vue + Vuetify Single File Compnonent

I'm essentially just remixing the code available here for a side project: https://github.com/aws-samples/aws-ai-qna-bot.git
Problem: I'm trying to insert a centered logo in the toolbar between the app drawer and the logout button. Typically I could accomplish this pretty easily with vanilla HTML and CSS, but this project is leveraging Vue.js and Vuetify, which I'm doing my best to get myself up to speed with.
I've referenced the following documents, including the README.md in the git repo:
https://vuetifyjs.com/en/components/images
https://v2.vuejs.org/v2/guide/single-file-components.html
File path: qna-bot-template/website/js/admin.vue
<template lang="pug">
v-app
v-navigation-drawer(temporary v-model="drawer" app)
v-toolbar(flat)
v-list
v-list-tile
v-list-tile-title.title Tools
v-divider
v-list(dense three-line subheader)
v-list-tile(v-for="(page,key) in pages" :key="key"
#click="drawer=false"
:href="page.href"
:id="'page-link-'+page.id"
:target="page.target || '_self'")
v-list-tile-avatar
v-icon(color="primary") {{page.icon}}
v-list-tile-content
v-list-tile-title {{page.title}}
v-list-tile-sub-title {{page.subTitle}}
v-list-group( prepend-icon="info" value="true" color="primary")
v-list-tile(slot="activator")
v-list-tile-title QnABot Help
v-list-tile
v-list-tile-content
v-list-tile-title Version: {{Version}}
v-list-tile-title BuildDate: {{BuildDate}}
v-list-tile
v-list-tile-content
v-list-tile-title
a(href="https://amazon.com/qnabot" target="_blank") General Instructions / QnABot Blog Post
v-list-tile-title
a(href="https://aws.amazon.com/blogs/machine-learning/creating-virtual-guided-navigation-using-a-question-and-answer-bot-with-amazon-lex-and-amazon-alexa/" target="_blank") Guided Navigation using QnABot
v-list-tile-title
a(href="https://aws.amazon.com/blogs/machine-learning/create-a-questionnaire-bot-with-amazon-lex-and-amazon-alexa/" target="_blank") Create a questionnaire using QnABot
v-toolbar(app fixed)
v-toolbar-side-icon.primary--text(
id="nav-open"
#click.stop="drawer = !drawer"
)
v-toolbar-title
v-breadcrumbs
v-breadcrumbs-item(href='#/edit') {{$store.state.info.StackName}}:{{$store.state.user.name}}
v-breadcrumbs-item {{page}}
v-spacer
v-toolbar-items
v-btn.primary--text(flat
id="logout-button"
#click="logout"
v-if="login") LogOut
v-container(fluid id="workspace")
v-layout(column)
v-flex
router-view
v-footer
</template>
So far I've tried following the following syntax, which I added right after the v-spacer toward the bottom of the wrapping template tags.
v-container
v-img(:src="/abc/xyz")
and this doesn't seem to be working.
Lastly I'll add that since this environment is deployed to an EC2 instance (don't think you can deploy it locally to prototype via vue serve or at least I haven't been able to), I'm having to do this very roundabout way of prototyping by deploying this S3 bucket where the webpages are built to, then I make this webpack listener which will see whenever I modify a file. Then I can refresh the index.html that is built in the S3 bucket to see my changes. Extremely clunky workflow, I know, but I've never worked in an environment like this so I'm not sure if there's a better way, plus the readme provided in the github repo is very light on details for how to modify the default layout.
Any help/pointers would be greatly appreciated.
If you are using a relative path to an image use v-img(src="/abc/xyz"). The ':' before src is shorthand for v-bind which you use for data-binding. So if your image path was dynamically generated you'd use :src="dynamicImage"' but if you are hard coding the path use src="/pathto/image.jpg". This might help.

Simple template system for static web development

I am currently in the process of designing and refining a landing page. Over the time, many things have been added and handling the amount of sections and modals is not as it easy as it used to be.
Coming straight to my question: Is there a simple solution to use templates in your normal web design flow to create static web sites. I do not need the advantages of a static site generator, like also compiling my sass or minifying my js files. Interpolation and a config file are also not needed nor wanted. Do you know any system that only allows me to split my html file into multiple components which will then be saved in different html files?
P.S. I am not looking for a Javascript template engine. The creation should happen once and produce a normal html file.
You can use a template engine like pug with client tool.
Example with pug:
Step 1: Install pug-cli
npm install -g pug-cli
Step 2: Code html using pug syntax (very easy to learn). Ex: Split home page file into multiple components (header, footer in folder template_parts):
<!DOCTYPE html>
html(lang="en")
head
meta(charset="UTF-8")
title Document
body
include template-parts/header.pug
h1 Home page
include template-parts/footer.pug
Step 3: Run pug-cli to auto convert html code
$ pug -w ./ -o ./html -P
Change ./ after -w by location of pug files, ./html after -o by location of html files after convert.
Without using PHP includes, I'm not sure if this can be accomplished without using some form of JS Templating engine as:
The majority of the web's content has a simple and declarative way to load itself. Not so for HTML
You should check out:
Metalsmith
An extremely simple, pluggable static site generator.
Handlebars
Handlebars provides the power necessary to let you build semantic templates effectively with no frustration.
If you're using GULP/GRUNT in your workflow anyway there are include plugins:
npmjs search for 'gulp include'
npmjs search for 'grunt include'
Best solution for that is to use server side rendering as the previous answare said.
But checkout this attaribute powered by w3schools it might help you.
I know this answare is to late. but it might help others.
Thanks.

How do I track down specifics for an opencart module that is rendering on my site but missing everything except the catalog template file?

I've inherited an opencart 1.5.5.1 site and am completely new to the cms. From what I've been able to gather, it was built by a competent developer but then went through a hack-it-up development team, and then on to me. So, I really don't know what all to expect from it.
I currently have a module that is rendering in the left sidebar and I don't know why it's rendering there. The only file I can find in the file stack related at all to this "module" is a single template file within the catalog directory structure called:
/catalog/view/theme/mytheme/template/module/affiliate_profile_select.tpl
All of the other installed modules on the site seem to have lots of other files associated with them, whose locations are verified by the research I've done on creating opencart modules: ie, module files in the following directories:
/catalog/controller/module/
/catalog/language/english/module/
/catalog/model/module/
/catalog/view/theme/mytheme/template/module/
/admin/controller/module/
/admin/language/english/module/
/admin/model/module/
/admin/view/template/module/
From what I've been able to find though, this single file (affiliate_profile_select.tpl) is the only file in the file stack that is associated with this module.
I can't find anything related to this module, and/or file, inside any of the vqmod php or xml files.
I can't find anything related to this module in the admin area. I've tried searching through all of the installed modules for other generic identifiers (the section view is rendering at the very top of the left-sidebar on most non-logged-in pages, so I'm looking for layout locations of "Left Sidebar" and positions less than 2), but haven't found anything.
And yet, the section is obviously rendering on the site, so it has to be there somewhere. In fact, it's rendering in two places. It's also in the top-content section of the mobile view of the home page.
Right now it's almost feeling like it was a module that had been written, installed, and configured, and then someone deleted all but one of the files associated with the module. Could a situation like that happen?
Is there any way to track this issue down by querying the database? Or would the template inclusion obviously be inside a file somewhere and I just need to find it? To complicate matters, the hosting company doesn't allow remote login with a console (from what I can tell). Otherwise I'd just have run a grep for the filename in case someone had just thrown an "include()" statement in somewhere. The only place I've checked for something like that so far was in the left-sidebar template file:
/catalog/view/theme/default/template/common/column_left.tpl
but it's just a simple for-loop that echoes out the module views.
Any help or direction on how I might be able to track this problem down would be of significant help.
In Opencart, .tpl (template) files are always called by controllers which as you probably guessed are in catalog/controller/. An if it's a module (showing in left sidebar position, it's probably going to be in catalog/controller/module/. First order of business would be to find the controller that's calling the template you referred to. I'd probably start by getting into a shell and doing something like this from the site's docroot:
grep -r affiliate_profile_select .
From there you should be able to find the associated module controller and any other logic involved. Sometimes people use vQmod to add something on to a pre-existing module so that can possibly explain the lack of other similarly named files.

Magento - locate specific core files

I am familiar with theming and using template hints in the Magento back office to locate .phtml files.
What I am not really familiar with are the core files such as app/code/core/Mage/Catalog/Model
What I need to do is override a core file like I would a core phtml file by copying it to 'my theme'.
I basically want to amend some labels which appear on the order summary page of the Magento checkout process - domain.com/checkout/cart/
I followed the trail to the phtml files using template hints. Within the app/design/frontend/default/mytheme/template/checkout/cart I found the code
renderTotals(); ?>
Now I managed, by accident, to stumble upon two of the files I wanted to change:
/httpdocs/app/code/local/Mage/Sales/Model/Quote/Address/Total/Grand.php
/httpdocs/app/code/local/Mage/Sales/Model/Quote/Address/Total/Shipping.php
I made local copies of these files (http://www.magentocommerce.com/wiki/how_to/how_to_create_a_local_copy_of_app_code_core_mage) to override the default labels, like I would if I was overriding a template file.
My question is, how can you locate core files which pertain to the 'stuff' you want to change, located in function calls such as renderTotals(); ?> in the phtml files?
Not being able to pinpoint stuff like I can with template hints is slowing me down, and I am struggling to find a solution as I am not up on all the vocab surrounding Magento yet.
Hope this makes sense and thanks in advance!
From the same settings page where you turn on Template Path Hints, also turn on the "Add Block Names to Hints" setting. This will show you PHP class names such as: Mage_Sales_Model_Quote_Address_Total_Grand to which you can deduce the folder path (underscores represent a subfolder, and the last piece represents the file name).
If you're getting a block such as Mage_Sales_Model_Quote_Address_Total_Default then sometimes it just takes a little common sense to see that it's pulling in other files from the same folder (such as Grand.php and Shipping.php). But there are generally only a couple files in the same folder, so this is pretty easy to see.
As Sid Vel said, a good Search Project functionality is helpful. But if you find yourself looking at Abstract.php of some class, often you need to look in a subfolder in that directory with the proper name to find the concrete implementations. But still, it gets you very close to where you need to be.
I always use Dreamweaver's site / directory search function. It will scan through all the files in the Core folder and tell you where the function is from. In your case, I would search for "renderTotals". You need to enable PHTML editing in Dreamweaver.
Most IDE's will allow this kind of search option. In Aptana you can Ctrl + Click on the function to open the file it is coming from. Magento takes ages to index itself on Aptana, due to its sheer size.