Jump to content

Strider64

Members
  • Posts

    378
  • Joined

  • Last visited

  • Days Won

    6

Strider64 last won the day on January 16

Strider64 had the most liked content!

About Strider64

  • Birthday 08/28/1964

Contact Methods

  • Website URL
    https://phototechguru.com/

Profile Information

  • Gender
    Male
  • Location
    A burb of Detroit, MI

Recent Profile Visitors

8,389 profile views

Strider64's Achievements

Advanced Member

Advanced Member (4/5)

35

Reputation

  1. Heck I even learn something new reading these threads. Here's my Database Connection: <?php namespace PhotoTech; use mysql_xdevapi\Exception; use PDO; use PDOException; class Database { private PDO $_connection; // Store the single instance. private static ?Database $_instance = null; // Don't initialize before it is called: // Get an instance of the Database. // @return Database: protected static function getInstance(): Database { if (!self::$_instance) { self::$_instance = new self(); } return self::$_instance; } public static function pdo(): PDO { $db = static::getInstance(); return $db->getConnection(); } // Constructor - Build the PDO Connection: private function __construct() { try { $db_options = [ /* important! use actual prepared statements (default: emulate prepared statements) */ PDO::ATTR_EMULATE_PREPARES => false /* throw exceptions on errors (default: stay silent) */ , PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION /* fetch associative arrays (default: mixed arrays) */ , PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC ]; $this->_connection = new PDO('mysql:host=' . DATABASE_HOST . ';dbname=' . DATABASE_NAME . ';charset=utf8', DATABASE_USERNAME, DATABASE_PASSWORD, $db_options); } catch (PDOException $e) { //echo $e; //echo "<pre>" . print_r($e->errorInfo, 1) . "</pre>"; if ($e->errorInfo[1] === 1045) { echo "Can't Connect to Database " . $e->errorInfo[1] . "<br>"; return false; } throw $e; // If PDO Exception error can't handle it throw it to Exception: } catch (Exception $e) { echo 'Caught exception: ', $e->getMessage(), "\n"; // Not for a production server: } return true; } // Empty clone magic method to prevent duplication: *Probably Not Even Needed Now* private function __clone() { } // Get the PDO connection: protected function getConnection(): PDO { return $this->_connection; } } I think (not totally sure) that before the constructor had to be public and that is why the Empty Clone Magic had to be used? Just something extra to use this class all one has to do is $stmt = Database::pdo()->prepare($sql); // Prepare the query:
  2. Another way of doing pagination is to figure out the offset of the table meaning where you are at actually in the database table: $offset = $per_page * ($current_page - 1); $sql = 'SELECT * FROM myTable WHERE category =:category ORDER BY id DESC, date_added DESC LIMIT :perPage OFFSET :offset'; // Offset of the table $stmt = Database::pdo()->prepare($sql); // Prepare the query: $stmt->execute(['perPage' => $per_page, 'category' => $category, 'offset' => $offset]); // Execute the query with the supplied data: return $stmt->fetchAll(PDO::FETCH_ASSOC); total pages in this case would be the number of records in the category $total_pages = ceil($this->total_count / $this->per_page);
  3. You're right that shouldn't even be in there in the first place. That was part of the update function. I just copy that part over to the insert function when I wrote that code as I never really tested it out as insert should never have an id it in the first place. Me bad. 🙄
  4. Thanks to the help here, I think I am on the right path with my pagination and selecting categories. While I'm not done coding I believe this is a much better way of doing it than using sessions thanks to requinix. This is what I have here so far for the vanilla JavaScript: 'use strict'; (function () { let d = document; let category = d.querySelector('#category'); let container = d.querySelector('.container'); let sidebar = d.querySelector('.sidebar'); let url = 'galleryImagesGet.php'; let current_page = 1, per_page =6, offset = 0; let database_data = {'category':'general', 'current_page': current_page, 'per_page': per_page, 'total_count': 0, 'offset': offset }; let pages = [{}]; let total_pages = 0; const links = d.createElement('div'); links.className = 'links'; links.textContent = 'SIDEBAR'; sidebar.appendChild(links); /* Handle General Errors in Fetch */ const handleErrors = function (response) { if (!response.ok) { throw (response.status + ' : ' + response.statusText); } return response.json(); }; /* * FETCH for New Category */ const categoryUISuccess = (parsedData) => { /* Remove Image For Screen (cleanup) */ while (container.firstChild) { container.removeChild(container.firstChild) } console.log('parsed_data ', parsedData); console.log('pages', pages); let count = 0; // For different class names for size boxes in CSS parsedData.forEach(slide => { /* Main Image Slide Block */ let displayDiv = d.createElement('div'); /* Array of different size class names for CSS */ let displayFormat = ["gallery-container w-4 h-2", 'gallery-container w-3 h-2', 'gallery-container w-4 h-2', 'gallery-container w-3 h-2', 'gallery-container w-3 h-2', 'gallery-container w-2 h-2', 'gallery-container h-2', 'gallery-container h-2', 'gallery-container w-2 h-2', 'gallery-container h-2', 'gallery-container w-2 h-2', 'gallery-container w-4 h-2', "gallery-container w-4 h-2", 'gallery-container w-3 h-2', 'gallery-container w-4 h-2', 'gallery-container w-3 h-2', 'gallery-container w-3 h-2', 'gallery-container w-2 h-2', 'gallery-container h-2', 'gallery-container h-2', 'gallery-container w-2 h-2', 'gallery-container h-2', 'gallery-container w-2 h-2', 'gallery-container w-4 h-2']; displayDiv.className = `${displayFormat[count]}`; //Assign Class Names to Div: container.appendChild(displayDiv); //Append Child to Parent Div: /* * Create div for indiviual images */ let galleryItem = d.createElement('div'); galleryItem.classList.add('gallery-item'); displayDiv.appendChild(galleryItem); /* * Image div element */ let images = d.createElement('div'); images.classList.add('images'); galleryItem.appendChild(images); /* * Image itself */ let galleryImage = d.createElement('img') //console.log(slide.image_path); galleryImage.src = slide.image_path; galleryImage.setAttribute('alt', slide.content); // Description of what image is about: /* Set EXIF info to data-exif attribute */ galleryImage.setAttribute('data-exif', slide.Model + ' ' + slide.ExposureTime + ' ' + slide.Aperture + ' ' + slide.ISO + ' ' + slide.FocalLength); images.appendChild(galleryImage); // Append image to Image div element: /* * Hidden Paragraph */ let paragraph = d.createElement('p'); paragraph.classList.add('hideContent'); paragraph.textContent = slide.content; images.appendChild(paragraph); /* * Title Block */ let title = d.createElement('div'); title.classList.add('title'); galleryItem.appendChild(title); /* * Heading 1 */ let heading1 = d.createElement('h1'); heading1.classList.add('pictureHeading'); heading1.textContent = `${slide.heading[0].toUpperCase()}${slide.heading.slice(1)}`; title.appendChild(heading1); let titleSpan = d.createElement('span'); titleSpan.classList.add('exifInfo'); titleSpan.textContent = slide.Model; title.appendChild(titleSpan); count += 1; }) /* * Create Lightbox for Large Image Display */ const lightbox = document.createElement('div') lightbox.classList.add('lightbox'); document.body.appendChild(lightbox); const images = document.querySelectorAll('img') console.log('images', images); images.forEach(image => { /* Add Event Listener to Images and setting css class to active */ image.addEventListener('click', () => { lightbox.classList.add('active'); document.querySelector('.content').style.display = 'none'; //document.querySelector('.pagination').style.display = 'none'; /* * Create Image portion of LightBox */ let galleryImage = document.createElement('img'); galleryImage.classList.add('galleryImage'); galleryImage.width = 800; galleryImage.height = 534; galleryImage.src = image.src // image path //console.log(image.src); /* * Create EXIF portion of LightBox */ let galleryExif = document.createElement('p'); galleryExif.classList.add('galleryExif'); galleryExif.textContent = image.getAttribute('data-exif'); /* * Create Text portion of Lightbox */ let nextSibling = image.nextElementSibling; // Grab the next sibling: let galleryText = document.createElement('p'); galleryText.classList.add('galleryText'); //console.log(nextSibling.textContent); //galleryText.textContent = nextSibling.textContent; /* Remove Image For Screen (cleanup) */ while (lightbox.firstChild) { lightbox.removeChild(lightbox.firstChild) } /* Add Image to Screen */ lightbox.appendChild(galleryImage); /* Add EXIF to Screen */ lightbox.appendChild(galleryExif); /* Add Content to Screen */ //lightbox.appendChild(galleryText); }) }) lightbox.addEventListener('click', () => { if (lightbox.hasChildNodes()) { lightbox.classList.remove('active'); // Exit Lightbox by removing active css class lightbox.classList.add('lightbox'); document.querySelector('.content').style.display = 'grid'; //document.querySelector('.pagination').style.display = 'flex'; } }) }; const categoryUIError = (error) => { console.log("Database Table did not load", error); } const paginationUISuccess = (parsedData) => { console.log('parseData', parsedData); pages = [{}]; database_data.total_count = parsedData.total_count; database_data.offset = parsedData.offset; total_pages = Math.ceil(database_data.total_count/database_data.per_page); console.log('Total Pages =', total_pages); for (let x = 0; x < total_pages; x++) { //pages[x].page = x+1; pages[x] = {page: x+1}; } pages.forEach(link_page => { console.log('page', link_page); console.log('link', link_page.page); }) createRequest('galleryImagesGet.php', categoryUISuccess, categoryUIError); }; const paginationUIError = (error) => { console.log("Database Table did not load", error); } /* create FETCH request */ const createRequest = (url, succeed, fail) => { //console.log(category.value); //console.log('database_data', database_data); fetch(url, { method: 'POST', // or 'PUT' body: JSON.stringify(database_data) }) .then((response) => handleErrors(response)) //.then(res => res.text()) // convert to plain text //.then(text => console.log(text)) .then((data) => succeed(data)) .catch((error) => fail(error)); }; category.addEventListener('change', () => { database_data.category = category.value; createRequest('galleryPagination.php', paginationUISuccess, paginationUIError); }, false); createRequest('galleryPagination.php', paginationUISuccess, paginationUIError); })(); I like using post instead of get as I don't have to deal with pretty url's as I personally find them a pain. Now all I have to do is finish the links. Thanks again for the help
  5. That what I was trying to get at when I said preloading the images (like Flicker, Facebook and other websites do) just didn't know the terminology. I am a photographer that I want to share my best photographs on my own website, but even then I will still have a lot of images. I know sessions isn't going to cut it, so putting it in the URL is better though I will need a way not to load all my images onto the website hence the pagination. I will figure it out, probably combing the both. The URL for the images and the data for the sessions? I know I can use REACT or other Frameworks/Libraries, but I like doing it from scratch. I like the challenge for the most part and I like coding when I'm not taking photographs.
  6. Well, I originally had pagination done in PHP, but I am in the process of converting it over to JavaScript. I'm more of a PHP person, but I like the fact Vanilla JavaScript doesn't reload the page. I was thinking of doing the links still in PHP, but I'm going to get around to doing it JavaScript. I was was thinking of just using sessions variables as a temporary fix, but if it cause this much of headache I probably just do it in Vanilla JS. Though I hate the thoughts of doing the links in JavaScript. 🤔🤣 I know there is way of preloading a certain amount of images in JavaScript which would be an idea solution, but I don't know how to go about to do it?
  7. Yes, It is after monkeying around with it for almost a day I simplified things and came up with this - I still think it can be better. $data = []; /* * The below must be used in order for the json to be decoded properly. */ try { $data = json_decode(file_get_contents('php://input'), true, 512, JSON_THROW_ON_ERROR); } catch (JsonException $e) { } //echo "<pre>" . print_r($data['category'], 1) . "</pre>"; //die(); if (isset($_SESSION['category']) && $data['category'] === $_SESSION['category']) { $_SESSION['current_page'] += 1; } else { unset($_SESSION['category']); // This probably isn't even needed? $_SESSION['category'] = $data['category']; $_SESSION['current_page'] = 1; } I will find out when I have more images or have less per page and have my links working in JavaScript (Which I probably should break this down even further?). Thanks John
  8. I am definitely going crazy as I know can't get it the database to load whereas before I could. Before this latest fiasco of mine I did what they said to do. /* create FETCH request */ const createRequest = (url, succeed, fail) => { let cat = {category: category.value} cat.category = category.value; console.log(category.value); console.log('cat',cat); fetch(url, { method: 'POST', // or 'PUT' body: JSON.stringify(cat) }) //.then((response) => handleErrors(response)) .then(res => res.text()) // convert to plain text .then(text => console.log(text)) .then((data) => succeed(data)) .catch((error) => fail(error)); }; Now I get this gobbly gook on all browsers <br /> <b>Warning</b>: Undefined array key "category" in <b>/homepages/11/d329291176/htdocs/phototech/galleryImagesGet.php</b> on line <b>19</b><br /> [{"id":171,"user_id":2,"author":"John Pepp","page":"blog","category":"general","image_path":"assets\/uploads\/img-gallery- It's obvious that it's the first two lines of the mess. But how would I fix it? It used to work with it on Firefox, but I restarted my computer and now it say is doesn't load. Even though I did do a re-hard set time when I made modifications in Firefox, but at least Chrome is still giving me that error. So at least I am just semi-crazy. BTW - Thanks for helping
  9. I normally don't ask for help but this problem is driving me crazy. I'm using plain Vanilla JS and use FETCH to retrieve a bunch of information for my photo gallery . https://phototechguru.com/gallery.php It works fine in Firefox, but not Chrome or Safari. In the later two browsers I am getting this error message. Database Table did not load SyntaxError: Unexpected token < in JSON at position 0 I will try to give the code I think that is important - here's some of the vanilla javascript /* create FETCH request */ const createRequest = (url, succeed, fail) => { let cat = {} cat.category = category.value; console.log(category.value); console.log('cat',cat); fetch(url, { method: 'POST', // or 'PUT' body: JSON.stringify(cat) }) .then((response) => handleErrors(response)) .then((data) => succeed(data)) .catch((error) => fail(error)); }; function selection(category) { /* Remove Image For Screen (cleanup) */ while (container.firstChild) { container.removeChild(container.firstChild) } let url = 'galleryImagesGet.php'; //let url = urlRequest + "category=" + category; createRequest(url, categoryUISuccess, categoryUIError); } category.addEventListener('change', () => { selection(category.value) } , false); category.value = 'general'; createRequest('galleryImagesGet.php' , categoryUISuccess, categoryUIError); })(); the galleryImagesGet.php <?php require_once 'assets/config/config.php'; require_once "vendor/autoload.php"; use PhotoTech\CMS; use PhotoTech\Pagination_New as Pagination; $cat = []; /* Makes it so we don't have to decode the json coming from javascript */ header('Content-type: application/json'); /* * The below must be used in order for the json to be decoded properly. */ try { $cat = json_decode(file_get_contents('php://input'), true, 512, JSON_THROW_ON_ERROR); } catch (JsonException $e) { } if ($cat['category'] === $_SESSION['category'] && isset($_SESSION['category'])) { $_SESSION['current_page'] + 1; } elseif (!isset($cat['category'])) { $_SESSION['category'] = $cat['category']; $_SESSION['current_page'] = 1; } else { $_SESSION['category'] = $cat['category']; $_SESSION['current_page'] = 1; } $per_page = 12; // Total number of records to be displayed: $total_count = CMS::countAllPage('blog', $_SESSION['category']); // Total Records in the db table: /* Send the 3 variables to the Pagination class to be processed */ $pagination = new Pagination($_SESSION['current_page'], $per_page, $total_count); /* Grab the offset (page) location from using the offset method */ $offset = $pagination->offset(); /* * Grab the data from the CMS class method *static* * and put the data into an array variable. */ $cms = CMS::page($per_page, $offset, 'blog', $_SESSION['category']); output($cms); function output($output): void { http_response_code(200); try { echo json_encode($output, JSON_THROW_ON_ERROR); } catch (JsonException) { } } I have tried Googling to find the solution and tried some of them, but I'm not to familiar with some of the terminology and I haven't gone too in-depth with the console for debugging. I can show more code if needed. What's really puzzling is why will work in Firefox and not other browsers? 🤔 I don't know if this what put in the right forum category?
  10. I just want to add it seems like you want to validate the data after it has been sent that to me doesn't makes sense to me. 🤔 To me this invalidates the reason you are using Ajax in the first place. I could be looking at the code wrong?
  11. /* * As long as you have the correct field names as the key and * the correct values in the corresponding keys the following * procedural function should work with no problem. * */ function insertData(array $data, $pdo, $table) { try { /* Initialize an array */ $attribute_pairs = []; /* * Set up the query using prepared states with the values of the array matching * the corresponding keys in the array * and the array keys being the prepared named placeholders. */ $sql = 'INSERT INTO ' . $table . ' (' . implode(", ", array_keys($data)) . ')'; $sql .= ' VALUES ( :' . implode(', :', array_keys($data)) . ')'; /* * Prepare the Database Table: */ $stmt = $pdo->prepare($sql); /* * Grab the corresponding values in order to * insert them into the table when the script * is executed. */ foreach ($data as $key => $value) { if($key === 'id') { continue; } // Don't include the id: $attribute_pairs[] = $value; // Assign it to an array: } return $stmt->execute($attribute_pairs); // Execute and send boolean true: } catch (PDOException $e) { /* * * getCode() is the sqlstate * * echo "unique index" . $e->errorInfo[1] . "<br>"; * * An error has occurred if the error number is for something that * this code is designed to handle, i.e. a duplicate index, handle it * by telling the user what was wrong with the data they submitted * failure due to a specific error number that can be recovered * from by the visitor submitting a different value * * return false; * * else the error is for something else, either due to a * programming mistake or not validating input data properly, * that the visitor cannot do anything about or needs to know about * * throw $e; * * re-throw the exception and let the next higher exception * handler, php in this case, catch and handle it */ if ($e->errorInfo[1] === 1062) { return false; } throw $e; } catch (Exception $e) { echo 'Caught exception: ', $e->getMessage(), "\n"; // Not for a production server: } return true; } Here's a detailed explanation of catching a duplicate username. Someone explained to me a long time ago that this was the proper way to catch duplicates especially if your website has a lot of traffic on it. You could do the following to check if a username already exists, BUT it doesn't prevent duplicates as two people could be entering the exact username at the same time. Sorry it's part of a Class, but this is just use as a courtesy to whoever is registering as the odds entering at the same username at the same time is not that great. public static function usernameCheck($username): array { if (isset(static::$table)) { $query = "SELECT username FROM " . static::$table ." WHERE username = :username"; } $stmt = Database::pdo()->prepare($query); $stmt->bindParam(':username', $username); $stmt->execute(); if ($stmt->fetch(PDO::FETCH_ASSOC)) { $data['check'] = true; return $data; } $data['check'] = false; return $data; }
  12. but if you handle errors first /* Handle General Errors in Fetch */ const handleErrors = function (response) { if (!response.ok) { throw (response.status + ' : ' + response.statusText); } return response.json(); }; and do this /* create FETCH request */ const createRequest = (url, succeed, fail) => { fetch(url) .then((response) => handleErrors(response)) // Check for errors .then((data) => succeed(data)) .catch((error) => fail(error)); // Catch the errors }; aren't you do the same thing with promises ? Fetch to me can be confusing.
  13. Why not catch the "error"? /* Handle General Errors in Fetch */ const handleErrors = function (response) { if (!response.ok) { throw (response.status + ' : ' + response.statusText); } return response.json(); }; /* Success function utilizing FETCH */ const UISuccess = function (parsedData) { /* Successfully Load & No Errors */ }; /* If Database Table fails to load then hard code */ const UIError = function (error) { console.log("Database Table did not load", error); /* Do Something like even run more code? */ }; /* create FETCH request */ const createRequest = (url, succeed, fail) => { fetch(url) .then((response) => handleErrors(response)) .then((data) => succeed(data)) .catch((error) => fail(error)); }; createRequest(url, UISuccess, UIError);
  14. /* Handle General Errors in Fetch */ const handleErrors = function (response) { if (!response.ok) { throw (response.status + ' : ' + response.statusText); } return response.json(); }; /* Success function utilizing FETCH */ const UISuccess = (data) => { console.log(data); // Parsed Data coming back from Ajax }; const UIError = (error) => { console.log("Database Table did not load", error); }; /* create FETCH request */ const createRequest = (url, succeed, fail) => { fetch(url) .then((response) => handleErrors(response)) .then((data) => succeed(data)) .catch((error) => fail(error)); }; /* Call the createRequest function const NameOfFunction () => {} */ createRequest(requestUrl, UISuccess, UIError); I found breaking down FETCH in separate function calls to be easier to understand. Maybe this will help?
  15. I find this an easy way to handle updating using an array /* Note ALL index keys must match the names of the Database Table columns */ function updateData(array $data, $pdo, $table): bool { /* Initialize an array */ $attribute_pairs = []; /* Create the prepared statement string */ foreach ($customers as $key => $value) { /* I personally would had just used id instead of customer_id as that is more inline with universal naming */ if($key === 'customer_id') { continue; } // Don't include the id: $attribute_pairs[] = "$key=:$key"; // Assign it to an array: } /* * The sql implodes the prepared statement array in the proper format * and updates the correct record by id. */ $sql = 'UPDATE ' . $table . ' SET '; $sql .= implode(", ", $attribute_pairs) . ' WHERE customer_id =:customer_id'; /* Normally in two lines, but you can daisy-chain pdo method calls */ $pdo->prepare($sql)->execute($customers); return true; }
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.