Hi everyone this might be a stupid question but i am not sure how to proceed thats why i am asking the question here.
I wants to use bootstrap-calendar in my yii2 project. I installed all the necessary files using the command given on the project page with help of bower.
Dependency are listed automatically and all the jquery and css files are installed in vendor folder. So now how do i use that widget in yii2 view file?
Do i just use it like any other js and css files i use?
I mean using AppAsset or do i manually include the files required to use the plugin like below?
<script type="text/javascript" src="../../vendor/jquery-1.9.1.js"></script>
<script type="text/javascript" src="../../vendor/underscore-min.js"></script>
<script type="text/javascript" src="../../calendar.js"></script>
I am really confused with this.
You can't use bower assets directly.
As you've probably noticed, they are installed in the vendor folder which is outside your web root. Making a copy of certain files from vendor folder to the web-accessible web/assets folder is called asset publishing. It is implemented using yii's AssetBundle class. AssetBundle also handles asset registration, which is the process of creating script and style tags in your HTML document.
A typical example of asset publishing is the BootstrapAsset class:
class BootstrapAsset extends AssetBundle
{
public $sourcePath = '#bower/bootstrap/dist';
public $css = [
'css/bootstrap.css',
];
}
This configuration instructs yii to publish contents of the dist directory to a temporary web-accessible location. Also, when this asset is registered in a view (BootstrapAsset::register($this)), a corresponding style tag to include bootstrap.css will be created.
This topic is extensively covered in the guide.
However, it's most likely that somebody has already taken all these steps and already created the corresponding asset bundle and possibly widget. In your particular case, consider these two date picker widgets:
https://github.com/2amigos/yii2-date-picker-widget
https://github.com/kartik-v/yii2-widget-datepicker
Related
our Team, work with laravel and we want to start a large scale project.
The front-end project will be written with Html Css Bootstrap jquery Sass
and we task runner is Gulp
How will our project directory be?
sass directories and my file and images Where do they go?
You can use Laravel Mix to compile CSS and JavaScript pre-processors. So you will store all your assets into resources/assets folder.
Laravel Mix provides a fluent API for defining webpack build steps for your application using several common CSS and JavaScript pre-processors.
To use laravel mix you have to first install node and npm.
Then create files app.js and app.scss in resources/app/sass directory and resources/sass respectively.
Then open webpack.mix.js file which will be on your project root write the following code in webpack.mix.js file
In webpack.mix.js file (you can see this file at your project root directory)
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
Now let's see what is the meaning of above two lines?
mix.js('resources/assets/js/app.js', 'public/js') says to read app.js contents (which is stored in resources/js directory), pull them and put them up in public/js after mixing them up.
Same is for mix.sass. Since it is using SAAS compatible so you may use CSS or SAAS based syntax to define your layouts. Webpack compiled them to a single CSS anyway. Now in master.blade.php, all you have to make these two calls for JS and CSS resources respectively:
<script src="{!! asset('js/app.js') !!}"></script>
and
<link rel="stylesheet" href="{!! asset('css/app.css') !!}">
Now run npm run dev command.
It will compile your CSS and JS files and put the build inside a public folder.
For detail explanation you can check
https://laravel.com/docs/5.7/mix
https://appdividend.com/2018/02/19/laravel-mix-compiling-assets-tutorial/
It varies from projects and frameworks. Put the stuff where you find that it makes the most sense. If you're running a standalone frontend app that uses Laravel as backend API you'll probably do well organising your app with it's own tree.
But considering you're using html, css, jquery and sass, which are standard web techniques, this is what Laravel is basically built for. So use blade-templates for the html and put all your jquery and css in the public folder. If you haven't used Laravel before you should probably plow through a series of tutorials to get the idea of its MVC structure.
When I update composer In my yii2 project some functions are being deleted in some files. For instance, function I've created in yii\web\Controller class is being deleted. What does it mean???
You have to extend yii\web\Controller to your own MyController class in project directory (not in vendor!). Never edit files in vendor directory, if you need to add/edit something - extend it to your own class, for example in frontend/models/MyExtendedModel.
composer update updates all files inside /vendor to actual versions, depends on config in composer.json.
we started our project with ES6 javascript skeleton.
we would like to extract some styles and custom attributes to a common folder so we can use these at any Aurelia module we will build in the future.
the problem is with the bundle files. we don't know how to config them to bundle external folder out of the main ES6 folder.
can you please tell us what to do?
It sounds like you want to build an Aurelia plugin that you can import into any project. I would start by taking a look at the Aurelia plugin skeleton.
Once you've built your plugin with the custom styles and attributes you want, you'll want to either register it with jspm as a link, or publically through a registry such as npm or github.
Once published, you will be able to jspm install registry:my-package in any new project, and add the following line to your main.js file:
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.plugin('my-package');
}
For more information on this last step, see the brilliant answer provided by Ashley Grant here.
Choices:
create an asset bundle (nicely explained by Ivo Renkema at How do I manage assets in Yii2?). this is what I need if I want to package my code for other use. alas, should I also do this for my own php include library functions? Or should I still stick them into the same php location as my other php files? In any case, if I want to go this route, presumably I would then customize the AppAsset class, included in the template, as explained in http://www.yiiframework.com/doc-2.0/guide-structure-assets.html .
stick my files directly into $basePath/web, where $basePath is typically something like /var/www/myapp/ (i.e., as $basePath/html/mine.html [and refer to it simply as href='/html/mine.html'], $basePath/css/mine.css , $basePath/js/mine.js, and $basePath/php/mine.php [and refer to it as $basePath= \Yii::getAlias('#webroot'); require_once('$basepath/php/mine.php') ])?
stick my local files where my php view code sits. the advantage is that the files are close to where I will use them. the disadvantage is that I may litter the view directories not only with php files, but also with my non-asset assets, even though they will be used only by these (my) php files.
it's a beginner's question for the google cache reference. it's about best practice when getting started. I can guess the answer, but we wouldn't want a novice to disseminate bad info.
If you need your CSS and JS files only in one view or one Controller you have 2 choices:
1- Create a asset bundle Here other guide if you need it.
2- Use registerJsFile() from View Class
You can acces from controller using:
Yii::$app->view->registerJsFile('js.path');
(Same with CSS files but using registerCssFile())
With the PHPfiles I always try to convert the code to yii's MVC. If you have a entire library try to add it as a component. Here a usefull guide
I've created a Polymer element for rendering markdown which uses the marked.js library. I was wondering, what is the recommended way of loading in its dependencies?
Should I just use a script tag?
<script src="../marked/lib/marked.js"></script>
Or would it be better to put all of my dependencies into an html import and link to that one file. In this case I only have one dependency but I could easily have more.
<!-- in scripts.html -->
<script src="../marked/lib/marked.js"></script>
<script src="../foo/foo.js"></script>
<script src="../bar/bar.js"></script>
<!-- in mark-down.html -->
<link rel="import" href="scripts.html">
Note: These paths assume my element (and its dependencies) are being installed with bower so they should all be siblings in bower_components.
Private resources should be installed in your component folder and used directly. But shared resources, those resources that other components my also want to use (like marked), should be handled as dependencies.
We suggest two conventions for handling shared dependencies:
always use the canonical path which is ../<package-name> (you did this already). Polymer by convention expects a flat-dependency folder (as supported by Bower), so any resource you need must always be on this path.
refer to an import for the shared resource.
In this case,
<script src="../marked/lib/marked.js">
meets the first convention. Your component can depend on marked package and expect it to exist at ../.
The second convention supports sharing. If more than one component in a project uses a script tag to load a library, the library will load multiple times. Imports, on the other hand, are de-duplicated, so you don't have this problem.
For example, if all components load marked the standard way:
<link rel="import" href="../marked-import/marked-import.html">
then you will only ever have one copy of the script loaded.
Additionally, imports allow you to indirect the actual resource. For example, normally marked-import would depend on marked and use a script tag to load the JavaScript. But in fact, any particular project author can modify the local marked-import.html to load the main code from a CDN or from any other location. By indirecting all access through the import, we create a single point of control.
Today, marked and other libraries do not include import files, so we have to fill in those gaps. Additionally, it will require coordination with other components (to have agreement on what the standard import name will be for any particular shared resource). As (and if) these conventions are adopted, such questions will lessen over time.
So, your component installed would look something like this:
/components
/mark-down - depends on marked-import
/marked-import - (controlled by user, can just depend on `../marked`)
/marked