Skip to main content

Best way to minimise/streamline/use synergies of code to populate several webpages with different content but same layout? [closed]

sorry for the non-specific title but my question relates to coding strategy and best practice.

I'm new to coding and I'm working on a website on a local server. I'm learning a lot of new coding languages (html, css, php, jquery, javascript, ajax and mysql) as I need them but I'm conscious that I'm a complate amateur when it comes to the best way to apply them.

Background

  1. My website has header and footer pages that include all the menu navigation, login system, css/js link type of things.
  2. Every other webpage leverages the header and footer pages, therefore the other webpages only contain content (I'll call these pages "article webpages" for clarity below).
  3. The layout of all the article webpages is the same but headings, images, colour schemes and text will vary from one article webpage to another.
  4. Lastly, I also have one other over-arching webpage that includes buttons and each button sends the user to an individual article webpage when clicked.

Question

Is there a way to save one webpage as a template for the layout and then each time the user clicks a button on the over-arching webpage the template populates the headings, text, images etc to almost create an article webpage on the spot (either based on the url or based on the button click.

I believe I'd need php to check the url side of things but I'm confused how to combine that with JS or Ajax to actually do the populating?

Desired Outcome / Constraints

  1. I want to make sure it happens seamlessly so that the page loads correctly the minute the button is clicked on the over-arching webpage i.e. I don't want the user to see things getting populated when they open the webpage.
  2. I thought it might make more sense to have a kind of blank template html document that's updated each time rather than saving every single article webpage. In effect it'd mean that webpages are created on the spot depending on the button the user clicked.
  3. I wasn't sure if this approach would cause issues when it comes to multiple users at the same time trying to see different articles?
  4. I don't want this proposed template approach to make the website heavy and slow if it would be faster to just save every article webpage individually.
  5. I wasn't sure if the new approach I'm thinking about may make the website less accessible to some users depending on the devices and browsers they're using? For instance if their device can't run javascript or something then they can't see the webpages at all (I don't know if that's even a thing but just giving a theorectical example).
  6. I'm open to new coding languages if it really makes more sense but I would rather not leverage out-of-the-box code templates like Bootstrap etc because I want to learn specifics.
  7. Some article webpages may have more text or images than others so the code needs to account for that by removing or adding divs or paragraph tags from the template webpage when the page is being populated.
  8. The template would need to be populated with:

a) data from the mysql database
b) images from the website folder

c) text from txt documents saved in the website folder

All help greatly appreciated and Happy New Year's Eve!! :)



source https://stackoverflow.com/questions/70544768/best-way-to-minimise-streamline-use-synergies-of-code-to-populate-several-webpag

Comments

Popular posts from this blog

Prop `className` did not match in next js app

I have written a sample code ( Github Link here ). this is a simple next js app, but giving me error when I refresh the page. This seems to be the common problem and I tried the fix provided in the internet but does not seem to fix my issue. The error is Warning: Prop className did not match. Server: "MuiBox-root MuiBox-root-1" Client: "MuiBox-root MuiBox-root-2". Did changes for _document.js, modified _app.js as mentioned in official website and solutions in stackoverflow. but nothing seems to work. Could someone take a look and help me whats wrong with the code? Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW

How to show number of registered users in Laravel based on usertype?

i'm trying to display data from the database in the admin dashboard i used this: <?php use Illuminate\Support\Facades\DB; $users = DB::table('users')->count(); echo $users; ?> and i have successfully get the correct data from the database but what if i want to display a specific data for example in this user table there is "usertype" that specify if the user is normal user or admin i want to user the same code above but to display a specific usertype i tried this: <?php use Illuminate\Support\Facades\DB; $users = DB::table('users')->count()->WHERE usertype =admin; echo $users; ?> but it didn't work, what am i doing wrong? source https://stackoverflow.com/questions/68199726/how-to-show-number-of-registered-users-in-laravel-based-on-usertype

Why is my reports service not connecting?

I am trying to pull some data from a Postgres database using Node.js and node-postures but I can't figure out why my service isn't connecting. my routes/index.js file: const express = require('express'); const router = express.Router(); const ordersCountController = require('../controllers/ordersCountController'); const ordersController = require('../controllers/ordersController'); const weeklyReportsController = require('../controllers/weeklyReportsController'); router.get('/orders_count', ordersCountController); router.get('/orders', ordersController); router.get('/weekly_reports', weeklyReportsController); module.exports = router; My controllers/weeklyReportsController.js file: const weeklyReportsService = require('../services/weeklyReportsService'); const weeklyReportsController = async (req, res) => { try { const data = await weeklyReportsService; res.json({data}) console