I am working a project that display product image. So to get more details about the products i put link, so when we hover the image we get a link like:
localhost/kbashop/display.html.php?name=alcatel.jpg
So how can i modify the above link to something like: localhost/kbashop/alcatel.html?
I have seen on many e-commerce site.
<?php
include_once'includes/connect.php';
try {
$sql = "SELECT filename FROM productlist LIMIT 4";
$s = $pdo->query($sql);
$result = $s->fetchAll(PDO::FETCH_ASSOC);
$counter = 0;
} catch (PDOException $e) {
$error = "Problem with your code".$e->getMessage();
}
?>
<!DOCTYPE html>
<html lang="fr" class="no-js">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Trouver un emploi rapidement.">
<meta name="auteur" content="kbajobs">
<head>
<title>KBASHOP</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<style type="text/css">figcaption
{
text-align:center;
font-weight: bold;
font-size: 12px;
border: 2px solid olive;
padding-top: 5px;
}
</style>
</head>
<body>
<header>
<div class="logo">
<h1><b>KBA</b><strong>Shop.com</strong></h1>
</div>
</header>
<div class="main">
<div class="catalog cf">
<ul class="products">
<?php foreach($result as $row):
$name = $row['filename'];
list($width, $height) = getimagesize("images/thumbs/$name");
?>
<li>
<a href="display.html.php?name=<?php echo $name;?>">
<img src="images/thumbs/<?php echo $row['filename']?>" width="<?php echo $width;?>" height="<?php echo $height;?>"/>
</a>
</li>
<?php endforeach;?>
</ul>
</div>
</div>
<footer>
<div class="footer-info cf">
<p>© Copyright - Tous droits réservés aux test - 2015</p>
</div>
</footer>
</body>
<html>
Please any link to tutorial or tips or advise on this topics will really like saving.
So here i am putting my code for more help.
I've managed to achieve this by editing the .htaccess file in the root directory, adding some rewrite rules.
There are many ways of doing this depending on the URL you want to show. This URLs are called "friendly URLs". This one simple example will solve your specific request:
RewriteEngine On
RewriteRule ^([^/]*)\.html$ /display.php?name=$1 [L]
You have to be aware that this rules tend to get more complicated depending on your friendly URLs requirements and project size.
One advice I would add is not to name your files .html.php. Keep things simple calling your HTML files with .html and your PHP files with .php
To get more documentation about this subject read about friendly URLs .htaccess rewrite rules.
Glad to help!
Related
I'm new to PHP and coding in general, I already made the same lines of code in HTML and it worked fine but when i move it to PHP it wont load.
<div class="left">
<div class="healy-logo">
<img src="/asset/healy-logo.png" alt="">
</div>
<div class="doctor-logo">
<img src="/asset/doctor authen.png" alt="">
</div>
</div>
This is what is shown when i run the html code and my expectation for my php file
expectation
But when i run the PHP code it shows an error
error
Try this
<div class="left">
<div class="healy-logo">
<img src="asset/healy-logo.png" alt="">
</div>
<div class="doctor-logo">
<img src="asset/doctor authen.png" alt="">
</div>
</div>
If you use "/" in starting of a file path, It will take the first directory as the root directory of your system. this takes the relative path of your project directory
i think you just forget to run with Xampp or something like that (dont forget to click run Apache Server), or you just forgot to copy image folder/file on Xampp Folder.
or you just forget to add . if that all still not working you can do inside the HTMl and not HTML inside the
example for inside the HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tes!</title>
<style>
body {
background-color: palevioletred;
color: white;
}
table {
text-align: center ;
}
</style>
</head>
<body>
<table border="1" cellspacing="10" cellpadding="10">
<?php
for ( $i = 10;
$i <= 100;
$i++
){
if ($i % 1) {
echo '<tr style="background-color: white;">';
}
for ($j = 1;
$j <= 100;
$j++
) {
echo "<center><td>Arsy I Love You</td></center>";
}
echo "</tr>";
}
?>
</table>
</body>
</html>
that's from me, hope thats help you bro!
I have created PHP files which accept data from $_GET method.
After that I use all the data I get to create HTML pages. Nothing is wrong with the data but in CSS I cannot style HTML elements. Except when it comes to inline styling, that works but it is not good to maintain.
I try to use like this but it doesn't work , Please Help
THANK IN ADVANCE
Example.php
<?php
$dataCover = $_GET['dataCover'];
$dataTitle = $_GET['dataTitle'];
$dataTag = $_GET['dataTag'];
$dataDir = $_GET['dataDir'];
$dataYear = $_GET['dataYear'];
$dataCreated = $_GET['dataCreated'];
$dataModified = $_GET['dataModified'];
$userAUID = $_GET['userAUID'];
$galleryID = $_GET['galleryID'];
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css" media="all">
#container img{
height: 230px;
width: 200px;
}
#container .center{
display: block;
margin: 0 auto;
}
</style>
<script src="../lib/jquery-1.10.2.min.js"></script>
<script src="../lib/jquery.mobile-1.3.1.min.js"></script>
<script src="../lib/se.js"></script>
</head>
<body>
<div data-role ="page" id ="page1">
<div data-role ="header">
<h1> header </h1>
</div>
<div data-role="content">
<div id="container">
<img class="center" src="<?echo $dataCover?>" alt=""/>
<p id="title"><?echo $dataTitle;?></p>
<p id="tag"><?echo $dataTag;?></p>
<p id="created">Created : <?echo $dataCreated?></p>
<p id="modified">modified : <?echo $dataModified?></p>
View Ebook-Gallery
Bookmark
</div>
</div>
</div>
</body>
</html>
When you move your css from inline to style sheet file, you have to refresh your page with Ctrl+F5. Maybe it's coming from the cache.
Also you can assign your css to the image by jquery.
I dont see any reference to any external stylesheet, so it seems like you have forgotten to do this.
Put this line
<link rel="stylesheet" type="text/css" href="/css/style.css" />
Somewhere in the head. Maybe before the script tags.
Make sure you adjust the path to your stylesheet.
Yes When you want to apply external css you have to give the path after the <title> tags within the <head> tags .just follow the html code
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--Here css is the folder name where you have keep the style.css file -->
<script src="../lib/jquery-1.10.2.min.js"></script>
<script src="../lib/jquery.mobile-1.3.1.min.js"></script>
<script src="../lib/se.js"></script>
</head>
I have a variable called $cat(which stands for 'category') in the URL.
Depending on whether it is "a" or "b" I swap the stylesheet using a link:
<?php
if($cat == "a") { ?>
<link rel="stylesheet" href="/css/styleA.css">
<?php }
elseif($cat == "b") { ?>
<link rel="stylesheet" href="/css/styleB.css">
<?php } ?>
styleA.css makes the background-color of the header blue, and styleB.css makes it red
<div id="header" data-role="header" data-position='fixed'>...</div>
if I click on a link that looks like this:
Click for red
Click for blue
the URL actually works (content is incuded depending on $cat) and I do get the value of $cat but the stylesheet does not seem to have swapped, since the color doesn't change. But if I reload the page (with the URL given by the link before) the stylesheets swap and everything works perfectly.
I used the same method for the desktop version of the website I'm working on and everything works perfectly fine.
This issue seems to only appear if I use jquery mobile.
Does anyone see why this isn't working as it should?
EDIT (adding html):
This is pretty much it, but here's the rest of it:
headpart:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title></title>
<link rel="stylesheet" href="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
<!-- Extra Codiqa features -->
<link rel="stylesheet" href="/css/codiqa.ext.css">
<link rel="stylesheet" href="/css/style.css">
<?php if($cat == "a") { ?> <link rel="stylesheet" href="/css/styleASS.css"> <?php }
if($cat == "b") { ?> <link rel="stylesheet" href="/css/styleBB.css"> <?php }
?>
<!-- jQuery and jQuery Mobile -->
<script src="https://d10ajoocuyu32n.cloudfront.net/jquery-1.9.1.min.js"></script>
<script src="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<!-- Extra Codiqa features -->
<script src="https://d10ajoocuyu32n.cloudfront.net/codiqa.ext.js"></script>
</head>
<div data-role="page" id="page">
<div id="panel_menu" data-role="panel" data-display="overlay">
<ul data-role="listview">
<li role="heading">Navigation</li>
<li>Home</li>
<li>Products</li>
<li>Service</li>
<li>Contact</li>
<li>Login</li>
</ul>
</div>
<div id="header" data-role="header" data-position='fixed'>
<h1>Header</h1>
Menu
</div>
<div data-role="content">
<?php include "$menu_page_content";?>
a
b
</div>
<div data-role="footer" data-position="fixed" data-theme="d">
<div data-role="navbar" class="ui-icon-nodisc">
<ul>
<li><a href="#" id='language' data-icon='custom'>Change Language</a></li>
<li><a href="#" id='category' data-icon="custom" >Change Category</a></li>
<li><a href="#" id='contact' data-icon="custom" >Contact</a></li>
</ul>
</div>
</div>
</div><!-- page -->
EDITIT:
Uploaded it to a free hoster: here
You may either click on one of the links in the content area, or on "category" in the footer area. Click & reload the page.
If most of your styles are the same with the exception of the color I would suggest putting them in a single style sheet and writing in a class to the body.
For Example
.header {
/* general header styles margins paddings and whatnot */
}
.cat-a .header {
background-color: red;
}
.cat-b .header {
background-color: blue;
}
Then variably write the class in on the body
<body class='cat-<?php echo $cat; ?>'>
It must depends on how data are cached on the browser you're using.
Several solutions are possible.
You could not swap CSS stylesheet, but add style properties using PhP or Javascript. That way you'll be 100% sure it will change. (As long as the user has javascript by the way, PhP would make it really 100% sure)
Or force the browser to reload CSS sheets everytime, but it's not a bandwidth friendly solution, I would not recommend that.
In case you want to use it to save user's choice and reload the correct background everytime, give a look at this :
http://www.dynamicdrive.com/forums/archive/index.php/t-44389.html
Didn't find any SO link though
I wonder whether someone may be able to help me please.
I'm using Aurigma's 'Image Uploader' software to allow users to add, and view images for the records they create with the image data collected and retrieved via an XML file.
One of the pages I've put together creates a gallery which allows the user to view the images, both individually and as part of a 'fancybox' slideshow. The script for this is shown below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<?php
$galleryPath = 'UploadedFiles/';
$thumbnailsPath = $galleryPath . 'Thumbnails/';
$absGalleryPath = realpath($galleryPath) . DIRECTORY_SEPARATOR;
$descriptions = new DOMDocument('1.0');
$descriptions->load($absGalleryPath . 'files.xml');
?>
<head>
<title>Gallery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="Libraries/fancybox/jquery.fancybox-1.3.1.css" rel="stylesheet" type="text/css" />
<link href="Styles/style.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link href="Styles/ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
<script src="Libraries/jquery/jquery-1.4.3.min.js" type="text/javascript"></script>
<script src="Libraries/fancybox/jquery.fancybox-1.3.1.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() { $('a.fancybox').fancybox(); });
</script>
<style type="text/css">
<!--
.style1 {
font-size: 14px;
margin-right: 110px;
}
.style4 {font-size: 12px}
-->
</style>
</head>
<body style="font-family: Calibri; color: #505050; font-size: 9px; border-bottom-width: thin; margin-top: 5px; margin-left: -475px; margin-right: 1px; margin-bottom: -10px;">
<div align="right" class="style1"> <a href = "imagefolders.php" /> View Uploaded Images In Folder Structure <a/> ← View All Uploaded Images </div>
<form id="gallery" class="page">
<div id="container">
<div id="center">
<div class="aB">
<div class="aB-B">
<?php if ('Uploaded files' != $current['title']) :?>
<?php endif;?>
<div class="demo">
<div class="inner">
<div class="container">
<div class="gallery">
<ul class="gallery-image-list">
<?php for ($i = 0; $i < $descriptions->documentElement->childNodes->length; $i++) :
$xmlFile = $descriptions->documentElement->childNodes->item($i);
$name = htmlentities($xmlFile->getAttribute('originalname'), ENT_COMPAT, 'UTF-8');
$description = htmlentities($xmlFile->getAttribute('description'), ENT_COMPAT, 'UTF-8');
$folder = htmlentities($xmlFile->getAttribute('folder'), ENT_COMPAT, 'UTF-8');
$source = $galleryPath . rawurlencode($xmlFile->getAttribute('source'));
$thumbnail = $thumbnailsPath . rawurlencode($xmlFile->getAttribute('thumbnail'));
?>
<li class="item">
<a class="fancybox" target="_blank" rel="original" href="<?php echo $source; ?>"><img class="preview"
alt="<?php echo $name; ?>" src="<?php echo $thumbnail; ?>" /></a> </li>
<li class="item"></li>
<p><span class="style4"><b>Image Description:</b> <?php echo htmlentities($xmlFile->getAttribute('description'));?> <br />
<b>Image contained in folder:</b> <?php echo htmlentities($xmlFile->getAttribute('folder'));?> </span><br />
<?php endfor; ?>
</li>
</p>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="aB-a"> </div>
</div>
</div>
</div>
</form>
</body>
</html>
What I'd like to be able to do is now make the images that are retrieved, user specific, i.e. User A can only view their images.
If this information was being retrieved straight from a mySQL database I know that within PHP I can use the 'SELECT WHERE' statement to filter the returned records, but could someone tell me please is there an XML equivalent that I could use?
Many thanks
Allowing users to view only their own uploaded images is not such a simple task. If the images are stored in a publically accessable folder then anybody can view the images using their browser.
To achieve this there are a few alternatives such as:
storing the images in the database rather than the filesystem,
creating a new foler for each user on the filesystem and changing
the read write permissions for each folder, or
storing the images outside the web root and fetching the images
using php i.e.
Instead of providing a link to an image. Provide a link to a cgi
script which will automatically provide the proper header and
content of the image.
For example: image.php?sample.jpg
You can then make sure they are already authenticated (e.g. pass a
session id) as part of the link.
This would be part of the header, and then your image data can
follow.
<?php
$file = basename(urldecode($_GET['file']));
$fileDir = '/path/to/files/';
if (file_exists($fileDir . $file))
{
//perform some authorisation check
...
...
// Note: You should probably do some more checks
// on the filetype, size, etc.
$contents = file_get_contents($fileDir . $file);
// Note: You should probably implement some kind
// of check on filetype
header('Content-type: image/jpeg');
echo $contents;
}
?>
I basically use php variables to store the value of the title and the body's ID.
This last one is a technique to have my button (pressed) in the navigation according to which section of the page the user is (in this case the user will know he is currently at "home").
Beginning of my index.php:
<?php
$title = "New Project";
$body = "home";
include("common/header.php");
?>
<div id="content">
<div class="container">
<div id="tagline">
Beginning of my header.php
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<title><?php echo $title; ?></title>
<link rel="stylesheet" type="text/css" href="styles/slimbox2.css" />
<link rel="stylesheet" type="text/css" href="styles/global.css" />
<link rel="stylesheet" type="text/css" href="styles/home.css" />
<link rel="stylesheet" type="text/css" href="styles/contact.css" />
<script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery.corner.js"></script>
<script type="text/javascript" src="scripts/jquery.validate.js"></script>
<script type="text/javascript" src="scripts/slimbox2.js"></script>
<script type="text/javascript" src="scripts/custom.js"></script>
</head>
</head>
<body id="<?php echo $body; ?>">
<div id="header">
<div class="container">
<div id="topbar">
<h1>wider design</h1>
<ul id="lang">
<li>English</li>
<li>Español</li>
<li>中文(繁體)</li>
<li>中文(简体)</li>
</ul>
<ul id="nav">
<li class="home">home</li>
<li class="products">products</li>
<li class="about">about</li>
<li class="contact">contact</li>
</ul>
To let the user know in which section he/she is:
#home li.home a, #products li.products a, #contact li.contact {
color: #999;
}
is there a simpler way of doing this?
Am I using unnecessary those PHP variables?
Yes, what you're doing is fine. I do something similar with a PageTemplate class. In addition to setting the title and navigation, it allows navigation links to appear based on user authentication, allows javascript and css to be added to the head section, etc.
What you're doing is very common. There are a million ways to do it, but they'll all require setting some variables.
janoChen,
I use the following method:
// get the url
$url= $_SERVER['PHP_SELF'];
// add a class on the menu item
<ul id="lang">
<li><a href="index.php" <?php if (strpos($url, "index.php")) { echo " class='active'"; } ?>>English</a></li>
//with css I set a style for the class active
li a.active {
color: #990000;
}
But you method also works.
Or else use an MVC framework like CakePHP
This works, but you should consider using a template engine such as Smarty instead.