Building dynamic websites with php and asynchronous js

#2

I’ll post up an example or something…once I get some more free time…

but understanding the ‘concept’ also helps…

The quick -n- dirty of it is…

you have your form/page (code)…and somewhere/somehow in this page you call a javascript/AJAX function.

This evebt actually calls an external PHP file… that (for example) does the database work or checks some value against another value in a db… (or whatever)… and then returns some data, a response…etc…

Your initial AJAX call that loads this PHP script… -also- handles the return/response… and handles things as coded:

Fail:

update some DIV/container DOM element with some text

Success:
Show success… or display the returned data to the page using javascript/jQuery (front end) as you see fit.

#3

Adam, as Whispers mentioned, I agree that AJAX is the way to go for dynamic display of data. It is very easy to do if you think it out ahead of time.

A quick simple example is here: https://www.w3schools.com/php/php_ajax_database.asp
If you click on the drop-down in the example it will dynamically populate a table pulled from a database.
It just “appears” on the screen. I think that example will help you start out. Good luck…

#4

thanks guys. i’ll have a look. I look forward to ur example whispers!

#5

guys,

this has been extremely helpful:

I’m going through it right now and learning almost all I need to know. but I still would like a professional sample!

#6

The way I design applications, the backend is API driven and the frontend is just there for logic. This works well for things like SPA’s using Angular, React, or a host of other frontend frameworks; it also makes adding things like mobile applications easier to add without really changing the logic used on the backend.

#7

i am just starting with AJAX. i have no exp with extensions like jquery and react. nor do i have exp in framworks like angular or node.js.

#8

Can you give a simple example of what you are trying to do here?

I know… have a page/form. and then have the page ‘update’…

but what kind of data are you talking about? example scenario?

Also… I’m not clear what you are asking for the ‘query string’ comment?

Are you saying this scenario:

And how are those values grabbed and used in a database query?

I have an example… but I’d like to tailor it a bit so it makes sense for you and your ‘goal’ here…

Is this a form submission? or just grabbing data form the URL string… and using that to make a database call… and then update the page with the response/returned data? on the page (without a ‘reload’)

#9

whispers,

yes your “whatever.com” link is what i’m talking about. however, I’ve learned from the following tutorial that GET can produce such results:

I’ve never used GET, always POST and an arg in the form of a file/page that’s included in the “method=’’” attribute of the form. this whole project will not happen for a while, but it will be a complete website with maybe 10-15 different pages. what I’d like to have, possibly built in .NET architecture but rather with PHP cuz microsoft sucks terribly, are pages that dynamically grab images from the mysql database and place them at various points on the page the way they are now. right now the owner has a huge background image as a “wallpaper” for each page that he threw together with photoshop. that won’t work. so it won’t be fancy, just a CSS menu at the top, the dynamic image creation and a few contact forms (which I already know how to do. I worked with ErnieAlex here on this forum to get PHPMailer() to work). I might also want to have a news feed of some kind that possibly uses XSS to display current trending articles regarding the industry and progress of the type of medical service he is offering (it’s a technology product).

I’m not sure if the XSS idea will work, as I’ve heard there are many security concerns with doing that stuff as hackers have exposed holes in the past with people who have done it. thanks.

#10

I think the acronym you are after is RSS, XSS is cross site scripting attack; RSS is a data feed.

1 Like
#11

So… to summarize?

You want to grab a value from the query string/URL…

and use this to load a specific ‘image’ on the page?

This doesnt sound to me like it needs anything AJAX related…

You would use an AJAX approach if you wanted to upload or load something on the page… WITHOUT a page refresh/submission…

#12

XSS. I thought that meant “cross site scripting”. I’ve never used RSS. so maybe that’s what I mean.

whispers, I seriously doubt AJAX would be needed cuz what I envision is:

10 pages with mostly static content, the static content being some native js, HTML formatting and CSS for the menus and maybe some page background. I’m assuming the images can be stored in MYSQL? and this might be a case where I need all static pages and I’m just thinking too hard about it all. this site is not huge nor will it ever need to be. but the other aspect of this is that I need to be able to detect when mobile visitors load the pages. as I understand that issue, the big boys have been putting the string “m.domain.com/page” in the address bar to indicate that the visitor is mobile. and godaddy tells me that their company has basically duplicated all of their “godaddy.com” files and modified them to accomidate the smaller mobile screens and put the new files under “m.godaddy.com”. but I have no idea how much trust can be put in the that, cuz it wasn’t a software developer at godaddy that told me that.

does any of this make sense?

#13

Not really! LOL (sorry)

I can provide an example of grabbing the URL params… and making a query with it… if thats what your after now?

As far as ‘mobile’ goes… not sure… not my strongest area… HOWEVER… we just adjust our content using CSS and media queries…

So doesnt matter what ‘device’ they are on… it matters about the viewport

tablet, phone, screen…etc…

You target a specific size (commonly referred to as a ‘breakpoint’, meaning… when you size your browser to ‘this size’… it breaks something)… ie: doesnt look good.

So you update your styles for that breakpoint…

wrapping stuff… adding/removing padding… whatever it not looking good at that size.

#14

I can provide an example of grabbing the URL params… and making a query with it… if thats what your after now?

That will prolly help. I will learn what I am after when I go thru that whole tutorial I mentioned before in this thread. they are great teachers. and I can always use what I’ve written to refer to as well. in those tutorials they don’t cover stuff like this, but they do talk about querying mysql dbs and creating image galleries. so that will help me learn at least something. but most of that junk they’re saying is for absolute newbs.

#15

can you provide me a sample of this?

#16

You should NOT store images in a database. It is possible, but it is also far easier to corrupt the image files. Store them on the server or in blob storage (S3 on AWS or Blob Storage on Azure) or directly on the server in their own directory, which is what most people do.

If the site is “mostly static” what does that actually mean? You may be trying to make things dynamic that really have no reason to be so.

http://example.com/index.php?ref=lake

$stmt = $pdo->prepare("SELECT articles, image_path, date_posted FROM Articles where category LIKE ?");
$stmt->execute(["%{$_GET['ref']}%"]);
$result = $stmt->fetchAll();

Something like that… It will return all fictitious articles that have ‘lake’ in the category.

#17

thanks! I will use that. by “static” pages, I mean 10 pages with .php extensions so PHP code can run, but will not using any AJAX coding. I realize that the word “static” mostly applies to programming concepts. I just used it in this context because that’s what this business owner understands. Otherwise I wouldn’t refer to non-dynamic pages that way.

#18

Okay, need to make sure we are using the same dialect!

What needs to be different on those pages. See if we can simplify what you are doing rather than exasperate it.

#19

r u expecting another reply from me? if not, give me some time to test what i’ve been given.

#20

Adam, you never store images in MySQL databases. It is a horrible design to do that. You can store pointers to files of images stored in folders and use those for displays as needed. Also, you can acquire data from other sites without much work. AJAX will let you pull data as needed as long as you have the correct authentication to do so.

Also, do not listen to GoDaddy’s info. There are tons of ways to set up a site to use mobile devices. The quickest, simplest is to just use the PHP Bootstrap Mobile-First layout. It is super simple to use and the learning curve is short. You can use Bootstrap to set up a site to that views differently on a phone vs a tablet, laptop or desktop. Here is a tutorial on it: Mobile-first Tut
Bootstrap is free, I prefer version 3 instead of 4. Easy to install and use. You might like to look into that.

#21

i’ll get to it when i have time. thanks ernie! you’ve helped a great deal recently. I don’t think i could pay you back for it. =)

Sponsor our Newsletter | Privacy Policy | Terms of Service