How to organize HTML file structure? - html

Let's say I have completed my index.html file with all the CSS and JavaScripts and I want to create some other ones like: "contact", "about us", "music" etc.
They all have to go into the same root folder as the index.html. Well this is ok with me since there's not that many, but what about sub-categories? Like in music I would like to have 10 different genres.html and inside that, 20 more artists.html and so on. This would entirely cluster my root folder. And putting them into a sub-folder doesn't work either, because then all the links to the centralized resources (like: CSS files, images, JavaScript) break. And having to manually adjust every absolute path is also a pain. I gave <base> a try but it messed other things up.
What is the best and simplest way to organize your website's page structure (preferably without a CMS)?

If PHP is an possibility, you could use an very simple script like this:
{root}/index.php
<?php
if(!isset($_GET['route'])){ // If no route is given
require_once 'pages/index.html'; // Load the default index page
}else if(!file_exists('pages/' . $_GET['route'] . '.html')){ // If an route is given, check if the page exists
require_once 'pages/404.html'; // If not, load an 404 page
}else{
require_once 'pages/' . $_GET['route'] . '.html'; // Or else load the given route
}
The url's will then be something like this:
www.yoursite.com/index.php?route=index (index.html inside the pages folder)
www.yoursite.com/index.php?route=contact (pages/contact.html)
www.yoursite.com/index.php?route=catalog/category/something/list (pages/catalog/category/something/list.html)
This is very simple and basic PHP using so called $_GET variables (More about that here )
All the requests will be handeld by the index.php inside the root of your website.
Because of that, your include link for your JS and CSS files, will always be from the root directory. Therefore, you don't need to worry about all the different paths.
If you need more help, just ask.
Update
Your folder structure could be something like this than:
root/
css/
js/
img/
pages/
music/
artist.html
something/
else/
stuff.php
index.html
contact.html
index.php
And instead of doing $_GET['route'] . 'html', you could also use just $_GET['route'] and append the file extension to the url. This way you can use all different types of file extensions. (www.yoursite.com/index.php?route=music/artist.php)
Or you could just change .html to .php. That's all up to you!

I use to design my page's structure with the help of PHP.
Here's how I would do it:
Template page
you can make your own template and only fill in the content:
<?php
$root = "";
require_once $root . 'class/page.php';
$page = new Page();
?>
<!DOCTYPE html>
<html>
<head>
<?php
$page->metaTags();
$page->metaDescription("");
$page->metaKeywords("");
$page->defaultStyles();
$page->addStyle("styleName");
$page->title("your page title");
$page->defaultScripts();
?>
</head>
<body>
<?php
$page->navigation();
$page->header();
$page->openContainer();
$page->openContentSection();
?>
Your page content
<?php
$page->closeContentSection();
$page->closeContainer();
?>
</body>
</html>
Now the page class will handle the layout and the links so you can make your changes in 1 place and still affect all the pages in your site.
Page class
class Page{
private $db;
private $root;
private $terms;
public function __construct() {
$this->db = new db();
...
}
public function metaDescription($desc){
echo '
<meta name="description" content="' . $desc . '" />';
}
public function defaultStyles(){
echo '
<link href="' . $this->root . 'css/bootstrap.min.css" rel="stylesheet" />';
}
....
}
Now, the pages can be anywhere you want them to be, you just set the $root to your absolute website url and all the includes will be correct no matter where your files are being saved.

Related

How to make Custom 404 err page without .htaccess file [duplicate]

I want to show the 404 page when user enters unknown address like on the above image.
I can control the unknown address after index.php but don't know how to do this for the part before the index.php part.
I wrote this code to control what user enters after index.php
<?php
$pageName = 'places';
if (isset($_GET['page'])) {
$pageName = $_GET['page'];
}
$pageList = array(
'places',
'places_info',
'save'
);
if (!in_array($pageName, $pageList)) {
$pageName = '404';
}
?>
It looks like you have apache on your development machine.
The way to have custom error pages is
Create/Edit the file in C:\xampp\htdocs\blit\.htaccess
Insert a line ErrorDocument 404 /blit/404.shtml
Create the file C:\xampp\htdocs\blit\404.shtml
Put whatever html you want in it.
Repeat for other errors.
If you type in localhost/blit/xxy and xxy.php and xxy.html do not exist then the error page will be shown.

How can I embed external content in a WordPress widget?

I want to display a download link inside a WordPress widget. The file to be downloaded is located in the download subfolder of the site root, so that it can be uploaded via FTP. The name of the file and the text to be displayed for the download link shall be stored in a simple text file in the same folder.
Assuming WordPress is installed on www.mysite.com. The file name is setup_1_0.zip and the link display is Setup 1.0.
I am open to the file format how this information is stored as long as I can upload that file via FTP, too.
How can I embed this information inside a Custom HTML widget to get a valid download link with the text taken from that file?
How to automate the process of uploading latest software's build and download link creation in WordPress?
Based on your logic.
You are trying to automate the download process of your latest software version.
You don't want to update things manually and you just want to upload your latest build in the /download/ folder. (Only drop your latest version using FTP; that's all)
This is how I would do it:
Referencing those questions:
Get the latest file addition in a directory
How to force file download with PHP
I propose two solutions: First two separte codes, Second One inline code.
Just for educational purpose
First solution: Quick and short usage:
(You might need a way or a plugin to activate running PHP in Widget; this plugin helps PHP Code Widget)
<?php
$path = "download/";
$latest_ctime = 0;
$latest_filename = '';
$d = dir($path);
while (false !== ($entry = $d->read())) {
$filepath = "{$path}/{$entry}";
// could do also other checks than just checking whether the entry is a file
if (is_file($filepath) && filectime($filepath) > $latest_ctime) {
$latest_ctime = filectime($filepath);
$latest_filename = $entry;
}
}
echo 'Download '. $latest_filename . '';
?>
Second solution:
(Again, you might need a way or a plugin to activate running PHP in Widget; this plugin helps PHP Code Widget)
A) Create download.php in http://www.example.com/download.php
Add the following code:
<?php
$path = "download";
$latest_ctime = 0; //ctime stands for creation time.
$latest_filename = '';
$d = dir($path);
while (false !== ($entry = $d->read())) {
$filepath = "{$path}/{$entry}";
// could do also other checks than just checking whether the entry is a file
if (is_file($filepath) && filectime($filepath) > $latest_ctime) {
$latest_ctime = filectime($filepath);
$latest_filename = $entry;
}
}
// echo $latest_filename; un-comment to debug
$file_url = 'http://www.example.com/download/'.$latest_filename;
header('Content-Type: application/octet-stream');
header("Content-Transfer-Encoding: Binary");
header("Content-disposition: attachment; filename=\"" . basename($file_url) . "\"");
readfile($file_url); // do the double-download-dance (dirty but worky)
?>
B) in your WordPress HTML Widget add the following code
<?php
$path = "download";
$latest_ctime = 0;
$latest_filename = '';
$d = dir($path);
while (false !== ($entry = $d->read())) {
$filepath = "{$path}/{$entry}";
// could do also other checks than just checking whether the entry is a file
if (is_file($filepath) && filectime($filepath) > $latest_ctime) {
$latest_ctime = filectime($filepath);
$latest_filename = $entry;
}
}
echo 'Download '. $latest_filename . '';
?>
Further explanation:
A) is responsiple for downloading the latest software build automatically.
B) is responsiple for displaying Latest build name and Creating the link.
Now, You only need to upload one file to your /download/ folder which is your latest build (setup_1_0.zip, setup_1_1.zip, setup_1_2.zip ...etc. The proposed solution will check creation date regardless of file's name.)
Important note: You can see that the latest file checker function is repeated twice; once in download.php and once in WordPress Widget. Because if we combine in one file we will get header already sent error.
Dose this answer your question please? Kindly feedback.

PHP: Retrieving and displaying (in HTML) most recent image file in folder

I would like to scan a folder, sort the files within that folder by modified time, and display the most recent file. Here's what I have so far:
<?php
function scanDir ($dir){
$fileTimeArray = array();
// Scan directory and get each file date
foreach (scandir($dir) as $fileTime){
$fileTimeArray[$fileTime] = filemtime($dir . '/' . $fileTime);
}
//Sort file times
$fileTimeArray = arsort($fileTimeArray);
return($fileTimeArray[0]);
}
?>
I'm calling this function in another php file, within the src of an img tag.
As of now
<img src=Array>
Where am I going wrong within the function? Thank you!!!

PHP code within Javascript - how to transfer variable

in my webpage, I have the following code:
<?php
echo "<td class=\"action\">
?>
<script>
function deleteline(a) {
var r=window.confirm("Voulez-vous vraiment supprimer le viager " + a +"?");
if (r)
{
<?php
$test="<script> document.write(a);</script>";
mysql_connect("localhost", "xxxxxx", "xxxxxx") or die (mysql_error ());
mysql_select_db("xxxxxx") or die(mysql_error());
$strSQL =("update viagers set statut='deleted' where id=????");
$rs = mysql_query($strSQL);
mysql_close();
?>;
}
}
</script>
In a php table, i have an small delete icon in each row. I want the user to be able to click on it so it deletes the record in the sql db. I can't find a way to retrieve the 'a' variable in the php code of my script function (replace by ????).
Could you please help?
thanks and regards
Harold
You can't mix javascript and PHP like that. Make another PHP file for deletion, and send the a by javascript to the file through AJAX.
PHP code inside javascript is not a good approach. As lqbal Fauzi mentioned, send a variable - row id by javascript to the php file through AJAX - or as I do below, by using JQUERY. In php file, you can do your database stuff and if wanted, send some result back to your application.
In your HTML file you have to have scripts with JQUERY library source files.. Download these 2 files from here:
https://mega.co.nz/#!IUAFCYZb!Cu0mQoAVAkJHzqvac40-RYA-n3TnhYGtoazw5k_PMv4
https://mega.co.nz/#!hABhFDiS!Q_L8rERVq8330zrOxXXen0uxmLCes7zYG6J6SCncz6M
and save/copy those files into the folder containing your html file.
Your html file should look something like this:
<html>
<head>
<meta charset="utf-8" />
<title>Your page Title</title>
<script src="jquery.mobile-1.3.2.min.js"></script>
<script src="jquery-1.9.1.min.js"></script>
<script>
function yourJavascriptfunction(sender){
var r=window.confirm("Voulez-vous vraiment supprimer le viager " + sender.name +"?");
if (r)
{
$.post("YourPHPPageToAccessDatabaseAndSendResult.php", {
UserID:sender.name
})
.success(function(data){
//some code on data return if you want
alert(data); //should pop up with message saying "Hello, this is the result data"
})
.fail(function(error){
alert("Unable to retrieve data from the server");
});
}
}
</script>
</head>
<body>
<button type="button" name="YourRowID" onclick="yourJavascriptfunction(this)" > your button text</button>
</body>
</html>
and in the php file named YourPHPPageToAccessDatabaseAndSendResult.php which has to be in this case in the same directory as your html file following code:
<?php
$connection = mysql_connect("localhost","USER","YOURPASSWORD") or die(mysql_error());
mysql_select_db("DatabaseName",$connection);
$UserID= $_POST['UserID'];
$strSQL =("update viagers set statut='deleted' where id=$UserID");
$rs = mysql_query($strSQL);
mysql_close();
//by printing with echo you sent some data that you want return to your html file
echo "Hello, this is the result data";
?>
The above code is not tested for functionality, there might be some typos, but the logic in there should work and help you in the future
Don't forget to substitute the YourRowID in button name in html file to whatever you need, and set correct USER, YOURPASSWORD and DatabaseName in the php file.

How can I use html5 cache manifest with CakePHP?

I want to use the html5 cache manifest technology with CakePHP,
but I don't know where to place the cache manifest in CakePHP,
I've searched for a solution, but I do not found anything.
Can you help me?
The best and easiest way to access one manifest file in all views is to look at your layouts, for example
View/Layouts/default.ctp
and replace <html> with
<?php echo "<html manifest='".$this->webroot."manifest.php'>"; ?>
in which manifest.php is located in
app/webroot/manifest.php
and looks something like this:
<?php
header('Content-Type: text/cache-manifest');
echo "CACHE MANIFEST\n";
echo "\n\nNETWORK:\n";
echo "*\n";
echo "\n\nCACHE:\n";
echo "# Version: 1\n";
?>
So the manifest.php is only needed once and can be used for all views.
HINT:
For a dynamic manifest-file you can use a code snippet from here:
http://nial.me/2010/01/using-the-html5-cache-manifest-with-dynamic-files/
I tried this solution, putting the manifest in default.ctp, but it causes some problems, all my pages was cached... i think it's discribed in the spec "...the page that referenced the manifest is automatically cached even if it isn't explicitly mentioned".
...couse this all my pages was being cached, manifest is checked in each page. And when another user logs in they see the last user homepage and other pages.
The final solution: create a redirect/loading page
1 - create the redirect page:
I had create the Pages/redirect.ctp file and the function redirect(){} in the Pages controller. A simple page, just with a hello message and a loading bar based on the applicationCache progress event:
var appCache = window.applicationCache;
appCache.addEventListener('progress', function(event) {
console.log(event.loaded + " of " + event.total + " files...");
//make some changes in the page' loading bar
}, false);
2 - Load manifest only in the redirect page:
In the View/Layouts/default.ctp I filtered the tag to show the manifest only in the redirect page:
<? if($this->request->params['controller']=='pages' &&
$this->request->params['action']=='redirect'): ?><html
manifest="<?=$this->webroot?>manifest.php">
<? else: ?>
<html >
<?
endif; ?>
3 - Use the redirect page in the auth component to lead my user
to redirect page after login:
In the appController a setted auth component like this
public $components = array (
'Session',
'Auth' => array (
'authError' => "user or password invalid",
'unauthorizedRedirect' => "/pages/redirect?err=login",
'loginRedirect' => "/pages/redirect",
'logoutRedirect' => "/",
'loginAction' => "/user/login",
'authorize' => array ('Controller')
)
);
now only the elements putted in the manifest will be cached. The redirect page is cached (according the spec) but the applicationCache event updates the page torning this "dinamic".
If you mean the manifest file it should go into /app/webroot, the directory that your vhost should also use for the site. besides this there is nothing really related to CakePHP with this.
Have a look at this: http://www.html5rocks.com/en/tutorials/appcache/beginner/