Trying to understand how shopping websites work

Hello friends :grin:,
Its been more than 15 days since i start learning html and css , i learned a lot and am still learning everyday , so my problem now is i have this miss of information about how websites like amazon and AliExpress build there sites , so the thing is i know that most of these websites uses CMS to creat pages in seconds and post blogs articles and more , and my head is keeping asking how to give the article or the item or th blog you want to post in your websites or website store the form or the layout so that all my future articles or posts or new release items as an example in my shopping website takes the form that i have created already, i still not quite sure how to do this and i will really need your help in this.

Hello there!

It’s great that you’re curious about how websites like Amazon and AliExpress build their pages. These websites create dynamic pages using powerful frameworks. The main point is that nothing happens with just HTML and CSS. You need dynamic programming languages like JavaScript or PHP. Additionally, some frameworks use Markdown (MD) for static site generation, such as 11ty. However, websites like Amazon or AliExpress are not just static webpages. They have powerful backend applications to handle user registration, order processing, creating product listings, and data visualization.

Don’t worry, you will learn these too. Just keep going and continue to learn. JavaScript is a powerful language, and there are several powerful libraries to make things better, such as React or Vue. You will also learn frameworks like Next.js, Angular, or even jQuery, and then explore architectural patterns like Flux or MVC. There are also CMS options ready to use headless, such as Strapi, or completely custom solutions. By the way, Amazon or AliExpress use their own CMS backend apps. There are plenty of options and tools, and these are just for the front-end side.

On the backend side, you might use Node.js, Django, or Ruby on Rails to create robust server-side applications. Databases like MySQL, PostgreSQL, or MongoDB store your data, while cloud services like AWS or Google Cloud help to scale your application efficiently.

Keep learning and experimenting with different technologies, and you’ll soon get the hang of it. Good luck!

2 Likes

Thank you so much for this short advice and answer with a lot of information , i will keep learning of course , it’s just the beginning, again thank you so much !

1 Like

The application that runs the shopping website is running on a computer somewhere.

That computer has a unique address. Same as houses or telephones or whatever. That address is mapped to a URL, like amazon.com.

So say there was a website with the URL https://example-online-shop.com. When you put that into a browser, it maps back to the address & contacts the application running on that computer (the server).

The server application is a piece of software that listens out for these requests. When it detects one, it sends back to the computer that made the request whatever data it is programmed to send back.

The way you access specific bits of data on the server is that you attach some additional information to the request. The server can be programmed to handle each different kind of request and send back specific data for each one.

One of the ways you can do this is by attaching information to the URL itself:

  1. if I go to example-online-shop.com the server sends me back some HTML representing the home page
  2. if I go to example-online-shop.com/signin the server sends me back some HTML with a sign in form. That form, when it gets submitted, makes another request to example-online-shop.com/signin with the data from the form attached to it. The server application can check whether that data is fine, and if it is can send back confirmation that you’re logged in.
  3. If I go to `example-online-shop/products?id=12345, then server can look up the product with the id 12345, and send back HTML representing a web page with that product.

That’s a simplification somewhat, but not by much. There exist in every language a multitude of frameworks designed to help you build these servers (and there are a vast multitude of applications where the servers have already been built out, that just let you upload things), as @0x74h51N describes.

For how you send a specific piece of HTML for each specific request, that’s context specific. You could just have a list of URLs and a folder of HTML pages. When the server recieves a request for HTML page x, return the correct HTML page from the folder.

This gets extremely unwieldy, because most of the content on the pages is exactly the same. So often there is a templating language used: you define (for example) a header and a footer and then what the content should be for a product but leave the actual details as variables. So like:

<article>
  <h2>{{ productTitle }}</h2>
  <p>{{ productDescription }}</p>
  <img src={{ productImgPath }} alt={{ productImgAlt }} />
  <p>£{{ productPrice }}</p>
</article>

Then when the request comes in for a specific product, the server can look jup the product details, then it takes the header and the footer, creates the HTML for the product from the template, then joins them together into a single HTML page and returns that.

2 Likes

Quite a journey but you see it in a seconds thank you so much .