thedigicraft / Atom.CMS

Atom.CMS
56 stars 52 forks source link

PHP clean URLs - Lose styles when using blog/new-jquery-plugin #168

Closed dbashby closed 8 years ago

dbashby commented 8 years ago

I am following vid 49 and everything is great up until 5:55 on the video where Alan adds blog/new-jquery-plugin

When the page loads I lose all css and the the debug panel is displayed on the page and I get the following under path array

`Path Array

    Array

( [base] => /3cms [call_utf8] => home/blog/new-jquery-plugin [call] => home/blog/new-jquery-plugin [call_parts] => Array ( [0] => home [1] => blog [2] => new-jquery-plugin )

)`

I don't understand why I am losing the styles at this point. If I then click on the home button I get the following in the address bar http://localhost/3cms/home/blog/new-jquery-plugin?page=home

If I reload the main site and use the normal navigation I get the following in the address bar as expected http://localhost/3cms/?page=faq

If I take the code back to pre call_parts everything is working. The URL I get when using the navigation is

http://localhost/3cms/?page=home http://localhost/3cms/?page=faq

etc

As soon as I enter the call_parts information everything starts to fall apart.

Where have I gone wrong?

Thanks

creptor commented 8 years ago

You should check the URI links to the file...

Also this site was made to work with just one variable (because of the .htaccess). If you wish to have more than one, then you shouldn't make any links (scripts, styles or others) dynamically placed inside of your code. Example:

<link href="../css/some_stupid_file.awesome">// wil not work if the URI has a extra base directory
.....
<link href="<?php echo $_SERVER["REQUEST_SCHEME"]."://".$_SERVER["HTTP_HOST"]."/";?>css/some_stupid_file.awesome">// will work, even if the URI has an extra base directory

In this case, a base directory would be an extra variable for the clean URI... like http://local.com/home/my_page ( where the file loaded would be index.php inside of local.com root folder), where /home would become your fictional base directory.

Because of the base directory (detected by the browser), the dynamic link would work like:

http://local.com/home/css/some_stupid_file.awesome

witch doesn't exists, but the static one will always output:

http://local.com/css/some_stupid_file.awesome
or
https://local.com/home/css/some_stupid_file.awesome

Depending in the security of your site, and how the users get to it (using https or http)

So if you're considering making a multi variable URI, you should make your links static (with some help of php :3 ).

dbashby commented 8 years ago

The basic file structure is the same as Alans apart from I named my project file 3cms the front end of the project is same. Other than different file names I am following Alans videos.

I continued on with the call parts section and rather than the above information being displayed regarding the Path Array now I have the following displaying on the home page debug panel.

`Path Array Array ( [base] => /3cms [call_utf8] => [call] => [call_parts] => Array ( [0] => )

[query_utf8] => page=home
[query] => page=home
[query_vars] => Array
    (
        [page] => home
    )

)`

`Path Array Array ( [base] => /3cms [call_utf8] => [call] => [call_parts] => Array ( [0] => )

[query_utf8] => page=home/blog/jquery-plug-in
[query] => page=home/blog/jquery-plug-in
[query_vars] => Array
    (
        [page] => home/blog/jquery-plug-in
    )

)`

creptor commented 8 years ago

Oh god, I don't understand :c , just let me sleep and tomorrow I'll watch the video again, so I know what you're referring to. (3 am :( )

creptor commented 8 years ago

O I understand... I know what is your issue here....

As I stated before, a dynamic URI won't work with this setup, right.... So if you have actually downloaded the bootstrap files to your project and add them to your index.php (dynamically) it will generate the issue you're experiencing.

An example code of what you have:

<link rel="stylesheet" href="../folder/css/mi_awesome_bootstrap_version.css">

This is why in the videos @thedigicraft used the CDN for bootstrap, because, the URI of those files is kind of static.

Example:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

That way, no matter the URI, those files will always work.

dbashby commented 8 years ago

Thanks for your help, I was going through everything and pulling my hair out. I grabbed the cdn from all the scripts and everything working great. Thanks again Creptor.