Very new to php... bear with me!
I'm creating a photography website and am stuck on a particular page. Ultimately I need the page to be a form with a dynamic number of inputs. It will be a dynamic visual representation of folders (or "galleries") on my web host server. Each div block will contain the first image from the folder along with the name of the folder - the heading text and image should both be clickable and act as a submit button to continue to the album.php page, passing the name of the folder via a GET method.
The first problem I had was trying to get rid of the submit button from a form, and replace with my album thumbnail and album title in an <a> tag. Apparently via javascript, and I managed to get this to work - kind of. I've gotten the page to a state where there is a form, with multiple inputs, but every single folder name is now being passed in the URL (e.g. mywebsite.com/album.php?name=album1&name=album2&name=album3) and I'm absolutely stuck!
The code is included, so if someone could have a look over and offer some guidance or point me in the right direction (and offer any other newbie tips!) it would be much appreciated.
Cheers
Lee
<form id="album" method="get" action="album.php">
<?php
$basepath = 'images/portfolios/public/';
$results = scandir($basepath);
foreach ($results as $result) {
if ($result === '.' or $result === '..') continue;
if (is_dir($basepath . '/' . $result)) {
//create new gallery for each folder
?>
<div class="gallery">
<?php
//get count of images in folder
$i = 0;
$path = 'images/portfolios/public/' . $result;
if ($handle = opendir($path)) {
while (($file = readdir($handle)) !== false){
if (!in_array($file, array('.', '..')) && !is_dir($path.$file))
$i++;
}
}
//create array, and choose first file for thumbnail
$files = array();
$dir = opendir($path);
while(($file = readdir($dir)) !== false)
{
if($file !== '.' && $file !== '..' && !is_dir($file))
{$files[] = $file;}
}
closedir($dir);
sort($files);
//form input - album name for next page
echo '<input type="hidden" name="name" id="name" value="'.$result.'" />';
//the headline and image link for gallery
echo '<a href="javascript: submitform()">' . $result . ' - ('.$i.' images)<br>
<img src="'.$path.'/'.$files[0].'" />
</a>';
?>
</div> <!-- end gallery -->
<?php }
}
?>
</form>
<script type="text/javascript">
function submitform(){document.forms["album"].submit();}
</script>
change your code from:
echo '<a href="javascript: submitform()">' . $result . ' - ('.$i.' images)<br>
<img src="'.$path.'/'.$files[0].'" />
</a>';
to this code:
echo '<a href="admin.php?name='.$result.'">' . $result . ' - ('.$i.' images)<br>
<img src="'.$path.'/'.$files[0].'" />
</a>';
Related
I have couple of html buttons in a .php page that are supposed to show files from directory containing .mp4/video files. I came across SCANDIR function which is working and shows the files in directory.
However, I need the listing to be interactive like click to play video (something like a href or hyperlink). Currently, the displayed list is just plain text.
I just need the listing to have a hyperlink to actual video files which I plan to play inside another html-div.
The git repo of code:https://github.com/psedha10/Craigs-Music-Player
//from index.php
<button class="button-left" onclick="showLatestHits()"> Latest Hits</button>
<p id="song_genre"></p>
function php_func_LatestHits()
{
$dir = 'music/Latest Hits';
$files = scandir($dir);
foreach ($files as $value) {
if ('.' !== $value && '..' !== $value && '.DS_Store' !== $value) {
echo "<br><br>" . $value;
}
}
}
<script>
var result_LatestHits = "<?php php_func_LatestHits(); ?>"
</script>
//from index.js
function showLatestHits() {
document.getElementById("song_genre").innerHTML = result_LatestHits;
}
I have found myself somewhat of an answer for the moment. The given code generates a video file after clicking play button and a tile/filename. However, it doesnt use scandir. It uses opendir and readdir functions of PHP.
//HTML Button
<a class="button-left" href="index.php?5060=true"> 50's + 60's </a>
//PHP function
<?php
function php_func_5060()
{
$dir = 'music/Fifty Sixty';
$videodir = opendir($dir);
while (false !== ($filename = readdir($videodir))) {
if ('.' !== $filename && '..' !== $filename && '.DS_Store' !== $filename) {
echo '<img src="' . $dir . "/" . $filename . '" width="100" height="100"> ';
echo ' Play ';
echo "<li style='list-style-type: decimal'><a> $filename </a></li><br>";
echo '<br><br>';
}
}
}
if (isset($_GET['5060'])) {
php_func_5060();
}
?>
//HTML seperate div that loads video using iframe from above link
<div class="bottom-middle-block">
<iframe name='yt' style="width: 100%; min-height: 100%" frameborder="0"></iframe>
</div>
A few caveats are iframe needs to be clicked after clicking play separately i.e. autoplay needs to be added. And, the img src used to show thumbnail plays the whole video in itself without sound like a tiny GIF.i.e. static image needs some modification.
I have a website where user can upload images, name and description. I am saving it in mysql and fetching that information to show on my website. That's what my below code does, let the user enter those information (image and text) and show it on the website when they click submit button.
My question is how can I make the div (that shows images, name and desc) to editable when user clicks the edit button (so change that same div to textarea or something that is editable) and for images should have an cross mark near the image when clicked on edit button, so user can delete it and upload button to upload more images.
What I have done: I try to use javascript to get the value of div and use that to change it to textarea, but it says the value is undefined for the grid div.
So, how can I make my div editable as explained above, as what I have try so far is not complete, so is there any better way to make the div editable same way I explained above so user can edit text and upload or delete images?
My code:
<?php
require "database.php"; // connecting to database
session_start();
global $username;
$username = $_SESSION['userUsername'].$_SESSION['userId']; //fetching the username
$image = "userPos/$username"; //fetching image posted by specific user
function listFolderFiles($dir, $username){
<!-- The div my_class is getting the images from local storage
that was initially uploaded by user in the website
(and we stored it in the local storage) to display them on the website -->
echo '<div class="my_class">';
$ffs = scandir($dir);
unset($ffs[array_search('.', $ffs, true)]);
unset($ffs[array_search('..', $ffs, true)]);
// prevent empty ordered elements
if (count($ffs) < 1)
return;
foreach($ffs as $ff){
$s = "'<li>'.$ff";
$saving = "$dir/$ff";
$string = "$saving";
global $string_arr;
$string_arr = (explode("/",$string));
$sav;
$sav = '<li>'.$ff;
global $sa;
$sa = "$ff";
echo '<div class="imagess">';
if(is_file($saving)) {
echo '
<div class="images">
<img src="'.$saving.' " width="100" height="100" alt="Random image" class="img-responsive" />
</div>
' ;
}
echo `</div>`;
if(is_dir($dir.'/'.$ff)) listFolderFiles($dir.'/'.$ff, $username);
}
echo `</div>`;
require "database.php";
<!--Here we are fetching the name and description
that was entered by user on the website
and displaying them on the website now-->
$username = $_SESSION['userUsername'].$_SESSION['userId'];
$sql = "SELECT * FROM `_desc` WHERE `username` = '$username' AND `id` = '$string_arr[2]';";
$result = mysqli_query($conn, $sql);
$resultCheck = mysqli_num_rows($result);
if($resultCheck > 0) {
echo '</br>';
while($row = mysqli_fetch_assoc($result) ) {
//name and desc
echo '<div class="grid">' . '<h2>' . $row["_name"] . '</h2>' . '</div>';
echo '<div class="grid2">' . '<p>' . $row["_desc"] . '</p>' . '</div>';
}
<!--Here I am trying when user click on edit button it should
change that div to editable textarea so user can edit
and save it or delete the whole div-->
echo '<button onClick="editName()" class="btn btn-info">
Edit</button>';
echo '<a href="deleteUserInfo.php?edit= '.
$row["id"].'"class="btn btn-danger ">Delete</a>';
}
echo '</div>';
}
listFolderFiles($image, $username);
?>
<script>
function editName() {
console.log("calling");
var divName = $("grid").html();
console.log(divName); //value is undefined here
var editableName = $("<textarea />");
editableName.val(divName);
$("grid").replaceWith(editableName);
editableName.focus();
editableName.blur(saveName);
}
function saveName() {
var htmlName = $(editableName).html();
var viewableText = $("<div>");
viewableText.html(htmlName);
$(editableName).replaceWith(viewableText);
$(viewableText).click(editName);
}
</script>
</body>
</html>
It is quite simple, you should use contenteditable attribute available and set that value to true. This will make the div element editable.
Like this,
<div class="grid" contenteditable="true">I am editable!</div>
In your case, you should use a function to select the element and set the attribute to true. And for the div element on clicking the type='file' input tag, you can write function that will delete the file that is previously uploaded and upload the new file. I would recommend you to research before posting a question in the community as you might get negative impacts on such questions. Hope it helps! Happy coding!!
When the user clicks the edit button, set the contenteditable attribute to true on the target element and set the focus to that element.
function editName() {
$("grid").attr("contenteditable", true);
$("grid").focus();
$("grid").blur(saveName);
}
I had last time asked that how to get an automatic generated link on the body of website of file uploaded on ftp-server.
Link is this Link to Code Automatic.
But my father wanted that it should not display the filename. Instead it should display that name that he would feed on some other page.
My main storyline is that when i go to that page, it asks me to enter a name that is to be displayed and next to it after <br>, it should give a dropdown menu of the files on the ftp-server and ask me to select the one for which i gave the name. Further on submitting, it displays the link to the file with the name i game.
Kindly help me solve this problem because i am a beginner at PHP and SQL.
Thanks
For the first page, use what was suggested in the first question, but use a HTML select instead:
<?php
// page1.php
// ...
// create a form element
echo '<form action="page2.php" method="get">';
// create the 'name' input
echo 'Enter the displayed name: <input name="name" placeholder="displayed name"><br />';
// start the dropdown
echo 'Enter the file the link should point to: <select name="file">';
// get all files that should be displayed
$files = scandir(__DIR__);
$files = array_diff($files, array('.', '..'));
foreach ($files as $file) {
// add an option to the dropdown
echo '<option value="' . $file . '">' . $file . '</option>';
}
// close the dropdown and the form
echo '</select>';
// add a submit button to the form
echo '<button type="submit">Submit</button>';
echo '</form>';
// ...
?>
On the second page, display the link:
<?php
// page2.php
// ...
$name = $_GET['name'];
$file = $_GET['file'];
echo '' . $name. '<br>';
// ...
?>
I have a mysqli database and form which allows me to store an id, name and photo. The path of the photo is set to an "images" folder on the server. I have a query which can
SELECT * FROM images WHERE name = $pagetitle.
This works absolutely fine, outside of the javascript slideshow. When i put a php command in the javascript where it is looking for which images to display, the js only shows 1 image, and not ALL images.
Any help would be appreciated, thanks.
The section of the code in question is below...
index.php
<!-- Image Slide Show Start -->
<div style="display: flex; justify-content: center;">
<img align="middle" src="" name="slide" border=0 width=300 height=375>
<script>
<?php
require('dbconnect.php');
$data = mysql_query("SELECT * FROM images WHERE name= '$pagetitle'");
$image = mysql_fetch_array( $data );
?>
//configure the paths of the images, plus corresponding target links
slideshowimages("<?php echo "/images/".$image['photo'] . ""?>")
//configure the speed of the slideshow, in miliseconds
var slideshowspeed=2000
var whichlink=0
var whichimage=0
function slideit(){
if (!document.images)
return
document.images.slide.src=slideimages[whichimage].src
whichlink=whichimage
if (whichimage<slideimages.length-1)
whichimage++
else
whichimage=0
setTimeout("slideit()",slideshowspeed)
}
slideit()
</script> </div><br><br>
<!-- Image Slide Show End -->
your update query have syntax errors, use , between fields, also you must contain strings in 2 ' :
$query = "UPDATE page_content SET PageTitle='$pageTitle',
PageContent='$PageContent', PageContent2='$PageContent2' WHERE PageId='$PageId'";
You have missed , between fields and '' around variables in your query.
$sql = "UPDATE page_content SET PageTitle='$pageTitle',
PageContent='$PageContent', PageContent2='$PageContent2'
WHERE PageId='$PageId'";
// check query executed successfully or get error
$result = mysqli_query($conn,$sql) or die(mysqli_error($conn));
OR
$result = mysqli_query($sql) or trigger_error("Query Failed! SQL: $sql - Error: ".mysqli_error(), E_USER_ERROR);
Hope it will help you :)
Try this:
$sql = "SELECT * FROM images WHERE name= '$pagetitle'";
$result = $conn->query($sql);
$directory = '';
while( $image = $result->fetch_assoc() )
$directory .= ($directory != '' ? "," : '') . ('"/images/'.$image["photo"] . '"');
// Check if it was successfull
if($directory != '') {
// if there are images for this page, run the javascript
?><script>
//configure the paths of the images, plus corresponding target links
slideshowimages(<?php print $directory ?>)
I have a problem when retrieving the images from a directory on my server, so what the main sequence is: in a page (multiupload.php) I added the input, allowed the image to be previewed and when the user submitted, a new directory with their session id would be created, the images would then be stored in the unique directory and the page would then be directed to (drag.php). The newly loaded page has a canvas with different divs to controls filters that are attached to that canvas. My problem lies with retrieving the image with the specified s_id as a directory name from one page to the other.
Q: Am i retrieving session variables properly? or using them appropriately?
This is the necassary snippets from multiupload.php's upload script.
<?php
$dir_id = session_id(md5(uniqid()));
session_start($dir_id);
$path = "uploads/";
$dir = $path.$dir_id;
$path = $path.$dir_id."/";
if (file_exists($dir)) {
system('/bin/rm -rf ' . escapeshellarg($dir));
} else {
mkdir($path);
chmod($path, 0722);
}
$_SESSION["id"] = $dir_id;
$_SESSION["directory"] = "/" . $dir;
$_SESSION["path_name"] = $path;
?>
I define the directory, whole path and the id for the directory. I would like to retrieve the id in the next page, but it's not doing it correctly.
and this is the retrieval code from drag.php
$realPath = 'uploads/'. echo $_SESSION['id'];
$handle = opendir(dirname(realpath(__FILE__)).$realPath;
while($file = readdir($handle)){
if($file !== '.' && $file !== '..'){
echo '<img src="uploads/'.$file.'" border="0" />';
}
}
My end result is that I would like all images to be drawn on the page. For now I would like them to be drawn anywhere aslong as they're visible.
If my question isn't clear, feel free to edit or comment where I should change. If you need more code or information, please let me know.
Please modify your code to this code:
<?php
$dir=$_SESSION['id'];
$realPath = '/uploads/'.$dir;
$handle = opendir(dirname(realpath(__FILE__)).$realPath);
while($file = readdir($handle)){
if($file !== '.' && $file !== '..'){
echo '<img src="'.$realPath.'/'.$file.'" border="0" width="200" />';
}
}
?>
I have use this code an I get the o/p like this:
<?php
$dir_id = session_id(md5(uniqid()));
session_start();
$path = "uploads/";
$dir = $path.$dir_id;
$path = $path.$dir_id."/";
if (file_exists($dir)) {
system('/bin/rm -rf ' . escapeshellarg($dir));
} else {
mkdir($path);
chmod($path, 0722);
}
$_SESSION["id"] = $dir_id;
$_SESSION["directory"] = "/" . $dir;
$_SESSION["path_name"] = $path;
?>
In any file.php, which u need get session:
<?php
session_start();
$realPath = 'uploads/'.$_SESSION['id'];
$handle = opendir(dirname(realpath(__FILE__)).$realPath;
while($file = readdir($handle)){
if($file !== '.' && $file !== '..'){
echo '<img src="uploads/'.$file.'" border="0" />';
}
}
?>
I advice to you read that: http://www.w3schools.com/php/php_sessions.asp when i was started with php 6 years ago - it was rly helpful
session_start does not take any argument. It's just to put a cookie and to read the session variables. (exposed in $_SESSION). You have to use session_start() on every pages to be able to read the $_SESSION variables.
this will give only image file from directory using session variable.
<?php
$dir=$_SESSION['id'];
$realPath = '/uploads/'.$dir;
$handle = opendir(dirname(realpath(__FILE__)).$realPath);
while($file = readdir($handle)){
if($file !== '.' && $file !== '..'){
if(fnmatch('*.jpg', $file) || fnmatch('*.png', $file) || fnmatch('*.jpeg', $file)){
echo '<img src="'.$realPath.'/'.$file.'"/>';
}
}
}
?>