MVC doesn't work. Some style sheets and javascript doesn't work

Hi. I have 2 types of the same website. 1 that uses MVC and 1 that uses hard-code PHP. Both have the same script, but I want to move the hard-code PHP one to an MVC logic. The hard-code PHP functions very well and is fast however with the MVC one, it is pretty slow at the same time some of my style sheets and javascript doesn’t work. In the MVC one, I’ve masked the original file names with made up fake file names a long with a direct link that checks to see if the URL ends with .css or .js. If it ends with either one of them, it will then go into the appropriate table in the database and search for the fake file name. If the fake file name exists, it will require the original and it’ll set the appropriate content-type. Example of this would be thisisjustacssfile.css will have the content tpe header “text/css”.

The main problem for this is that for some reason, I have to move around the original javascript on the MVC one because it won’t work properly. I’m using jquery-1.9.1.min.js for most of my javascript events on both the hard-coded PHP and the MVC one, but for the MVC one. It doesn’t do any jquery events while on the hard-coded PHP one, it works just fine.

Is this suppose to happen with MVC logic?

Nope.

But there are a lot of details that MVC doesn’t mandate, and there’s a lot of variation from one MVC application and the next. To find out what’s going wrong, we’ll need a lot more details about your particular application.

As Jeff noted, MVC isn’t usually responsible directly for making sure your JS scripts are called properly. In most cases, your (backend) MVC system doesn’t even know they are there. They are just calls in some template to the files. The fact you are jumbling names of the files and finding them in the database only to return the proper names is new to me. Why are you doing that? Do you have some sort of strange and special requirement to hide file locations?

Because, I’d venture to say, that is the problem. That or your webserver isn’t set up properly.

Scott

Ok, well the MVC I’m using is partially from https://github.com/panique/mini. I’m only using the core, model, and controller. The views, style sheet and javascript have a different purpose.

What I’m attempting to do is something like Facebook’s fbstatic-a.akamaihd.net/rsrc.php/v2/ type of masking. Basically hiding the location of the real style sheets and javascript. Yes, I do know that if you have something within the root folder, it can be accessed however, my approach is to make it so that they “think” they are seeing the actual location when they are looking at a fake URL. This is so if someone were to come and take the URL of my style sheets or javascript, I will most likely generate and change the names so that if someone does indeed take the styles or javascript, on their side. They won’t have a working style sheet or javascript.

That isn’t a masking of static files but rather simply Facebook’s CDN. Interesting they are using Akamai.

You can’t really hide CSS or Javascript files. They are “public” files and as soon as you deliver a web page with either file type referenced in them, anyone can have the files. The only thing you can do is uglify them, which still isn’t really hiding anything.

Scott

I agree with Scott, unless the js and css files are being hotlinked (in which case it would be better to move them out of the root folder), trying to obfuscate things is a waste of your time and effort.

Hmmm, I think I know why it’s taking long for my MVC application to load compared to my hard-coded PHP version. It’s probably because Apache is trying to find the style sheets and javascript files and that is what is causing the slow load. As for uglify them. Do you mean put everything together without line breaks and what not and just have a long 1 line file?

So you’re saying my best bet is to just use the real file locations?

This doesn’t really have anything to do with MVC.

having said that I suggest you look into using Grunt. Grunt is a JavaScript based task runner that could be considered the *current industry standard for aggregating css and javascript files not to mention a whole host of other things.

If that puts you off you could also try using Assetic. However, with the invention of nodejs based task runners like grunt Assetic isn’t nearly as *modern of an approach anymore.

Task runners are kinda phasing out the need to manage assets server side in many ways though given the right use case there is an argument to use Assetic or possibly both. However, I would recommend using Grunt since that will likely translate better to more projects and internal ecosystems.

Using Grunt does add a certain level of complexity that some front-enders might have difficulty understanding. However, it is well worth the benefit if you have several independent asset requests. Aggregating them into a single one per content type can be a significant optimization advantage.

It kind of does. The core that I was using from the MVC link doesn’t let me use my css link like http://domain.com/css/style.css so I had to put the styles and javascript in a subdomain and link it from there. It works, but then it’s slow. I’m not sure how the creator of the respiratory got their style sheet to work.

This is standard procedure.

[quote=“spaceshiptrooper, post:7, topic:179836”]
As for uglify them. Do you mean put everything together without line breaks and what not and just have a long 1 line file?[/quote]

Yes, that is what I mean.

Will Grunt also change your PHP files (the CSS and JS links), if you are uglifying and minifying the CSS and JS files?

Also, what do you think about Gulp? It is also gaining a lot in popularity.

Scott

I’m not sure I follow you on that first question.

In regards to Gulp though I haven’t used it. With any newer technology I would recommend the one with the larger ecosystem of resources. I believe that to be Grunt over Gulp.

If you uglify and minify the files, they usually will get new name with version numbers. You also need the versioning to bust browser cache, when you change the contents. These new versioned names have to be inserted into the PHP files / templates holding the links to the files.

Scott

The grunt tasks which I have used deploys the compiled asset files to a separate “distribution” directory. I have been using yeoman which works this way. However, I’m sure you could create a task to compile and deploy the asset files in nearly any manner. On of the strengths with Grunt is the number of open source tasks available. I’m sure there is nearly something for *everything which exceptions but even than you can create your own tasks.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.