Creating a "You may also like-field" or "Popular posts"

[web4739090954]

Hi So I want to create a sidebar list of “Popular posts” or “You may also like”, as a kind of sidebar, on the test-website, that I am trying to create. Now, when creating a website in Wordpress for example, it is possible to download plugins that take care of this.

But I want to do it on my own, in Visual Studio Code, without using a plugin, or the Wordpress-app.
I have found tutorials on how to create sidebars. But I am not sure how to create a “Popular posts” to the right on the website’s main page, that automatically lists the three most read posts for example. Or in the case of “You may also like” sorting posts depending on the post that the visitor to the site is reading at the moment.

Is this kind of like creating a sidebar but then drawing in some Javascript to make the posts appear in this fashion?

All help with this is much appreciated. Thanks

[stetim94]

@web4739090954

Is this kind of like creating a sidebar but then drawing in some Javascript to make the posts appear in this fashion?

You could use JavaScript to fetch this data from the back-end, and then render it dynamically, yes. Or just include this data on page load (less dynamic)

but calculating the most popular posts is something your back-end and database need to do. Databases are designed to order, group and sort data very effective.

[web4739090954]

Hmm ok. Any idea on how to do this or do you have any particular code in mind?

I have the appearance of the sidebar-list ready, which I have created in HTML and CSS, but I don’t know how to make this list automatically sort the three most read posts in there for example.

[stetim94]

@web4739090954

Any idea on how to do this

several, but it really depends on what you currently already have implemented

@web4739090954

but I don’t know how to make this list automatically sort the three most read posts in there for example.

Where is your list? In JavaScript? I suppose you could sort using JavaScript, not the most scalable solution but it might meet your requirements.

[web4739090954]

Ok so at the moment the code looks like this below. Perhaps I could add Javascript to this to make it work somehow? I don’t want to have the a-links there. I want it to sort the most read posts below the name Popular posts:

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@600&display=swap'); .sidebar { margin: 0; margin-top:20px; padding: 0; width: 200px; position: fixed; height: 40%; width: 30%; overflow: auto; position: fixed; right: 0%; font-family: 'Oswald'; } .sidebar a { display: block; color: black; padding: 16px; text-decoration: none; } h2 { display: block; height: 2%; color: black; padding: 16px; text-decoration: none; margin-top: 0px; text-align: center; } .sidebar a.active { color: black; height: 8px; } .sidebar a:hover:not(.active) { background-color: #555; color: white; } div.content { margin-right: 250px; padding: 1px 16px; height: 100%; } .sidebar a {float: left;} div.content {margin-left: 0;} } } ul { list-style-type: none; padding-left: 0px; position:relative; left: 0px; margin-left:0; color: green; }

[web4739090954]

HTML:

POPULAR POSTS

---

• Home

  ---

• News

  ---

Responsive Sidebar Example

This example use media queries to transform the sidebar to a top navigation bar when the screen size is 700px or less.

We have also added a media query for screens that are 400px or less, which will vertically stack and center the navigation links.

Resize the browser window to see the effect.

[stetim94]

@web4739090954

I don’t want to have the a-links there. I want it to sort the most read posts below the name Popular posts:

where are your posts? And how are you going to determine what the most popular posts are?

[web4739090954]

I only have one post at the moment

It is called “first_page.html”

I want to sort them based on how many times they have ben clicked/read.

[stetim94]

you would need to integrate a back-end with database to keep track of this

There are very many options here (in programming languages and database engines). Too many to list

[web4739090954]

Hmm ok. Does that mean Hosting or something like that? I am just working on this in my personal computer at the moment.

[stetim94]

@web4739090954

Does that mean Hosting or something like that?

not necessarily.

you can run all the software you need on your local machine. Popular stacks are LAMP (linux, apache, mysql and php) or MEAN stack ( MongoDB, expressJS, angularJS and nodeJS)

there also plenty of other alternatives (golang, Java, c#, ruby, python). So many back-end languages and database engines.

there is XAMPP:

XAMPP Installers and Downloads for Apache Friends

which bundles everything of the MEAN stack into a simple to install and manageable program.

however, if you have only done html & css at this point, this might still be overwhelming given how many more layers this introduces into your application

[web4739090954]

Hmm ok. Yeah that would be too much for me at the moment I think Javascript is pretty hard even. And I haven’t touched on other languages than PHP CSS and HTML. I was hoping for a simpler path to do this? With Javascript only, for example. Do you know if this is possible?

Also, I basically don’t know what a database is
Many terms that shrewd programmers know a lot about, I have no experience with yet.

[stetim94]

PHP could work, that is a back-end language

@web4739090954

With Javascript only, for example. Do you know if this is possible?

depends. This limits you in functionality. Now a user can only see how many times they clicked a link, not a total of all users.

[web4739090954]

Ok steTim, Then PHP it is A combo of Php and Javascript then perhaps?

So I have created three “websites” in my life. One using Local to make a website, using php and Wordpress. And the one I am adressing in this thread, which is only created through Visual Studio Code, outside of Wordpress. Now, is it possible to use php outside of Wordpress as well? I mean, when creating websites that rely solely on Visual studio code? I thought perhaps PHP was only used when doing websites through Wordpress. But as I understand you, it is sometimes used in Visual studio code as well, when doing websites outside of Wordpress?

[stetim94]

@web4739090954

A combo of Php and Javascript then perhaps?

Including Javascript as well would make things more complex.

You really need a better understanding of the different pieces/layers and how they fit together.

Visual studio code is just a text-editor. We can use VSCode to write many different programming language.

Then we have to run the PHP code, for which we use a webserver (often apache2 or nginx). For python code we would use the python interpreter to run the code. Sometimes the tools to run code can be/are integrated in the code editor.

I have no experience with wordpress, so not entirely sure how that works

[ghostlovescore]

One thing I’d like to add to the conversation,

@web4739090954

Now, is it possible to use php outside of Wordpress as well?

@web4739090954

I thought perhaps PHP was only used when doing websites through Wordpress.

Please note that PHP is independent / unrelated to WordPress. It’s the language that was chosen to build WordPress, but it could have been another language (Ruby, Python, etc).

So yes, it’s absolutely possible to use PHP outside of the WordPress platform. PHP has helped built websites like Facebook, Yahoo, Wikipedia, Tumblr, Flickr, as well as WordPress.

To run PHP, you basically just need a text editor to write it (VSCode, Atom, Sublime…) and a webserver to run it, as Stetim mentioned. You can run it on localhost if you set up a webserver on your machine, or download an out-of-the-box solution such as XAMPP. Which is super easy to set up and use.

---

To do what you want to do, you’ll need a database. So you need to get familiar with this.

Within your database, you’ll have tables.

One table will be the “posts” table.

In your posts table, you’ll have columns.

For example, the columns could be

id | title | body | count

In count, you’d store the number of times the post has been read.

Every post has its own row, like:

1 | My first post | Hey guys, this is my first | 12
2 | My second post | Hey, back for another one | 24

Every time someone reads the post, just send the information to the database (increase the total of count by 1). Then, to get your three most popular posts, just select the ones that have the highest numbers in the count column.

This you’ll need to do with another language, called SQL.

It’d look something like

SELECT title FROM posts ORDER BY count DESC LIMIT 3

This would give you the three most popular posts, starting with the one having the highest count (so, from our fake database, “My second post” would appear before “My first post”).

---

Hope this is helpful and not too confusing… I’ve given you an idea on how to do this, but you’ll still need to figure out how to send the information to the database, increase the count, etc. as well as how to set up your database, tables, columns, and all. Might be overwhelming, but you’ll learn a great deal.

Best of luck!

[web4739090954]

First to you stetim94: Yes, I really need a better understanding of what a database and a server is and all of those components. Do you, or ghostlovescore, have a good curriculum or tutorial that explains this for “Dummies” ? I mean how it all fits together.

I am not really very tech savy but I am working on it. It was mostly the visual stuff, and the (cool) moving parts of Javascript, that drew me in to this. But I feel I need to get a better understanding of what is going on behind the scenes and all of that as well.

ghostlovescore: Thank you for a great and thorough answer. I suspected PHP was used outside of Wordpress as well. So it is a great language to learn then, right?
I have managed to install XAAMP on my Mac now as well. Today in fact.

Yes, and this is a bit overwhelming, you are right about that. I am going to do this as you have recommended, but I feel I need to start by learning what these components do. I have barely heard of SQL before. That is some kind of database-language or something right?

Yeah, and I really like doing hard things like this to learn more. I just fall on my face and then I try to fall a bit lighter the next time, right

[ghostlovescore]

@web4739090954

So it is a great language to learn then, right?

I’d say yes, it is. Make sure to focus on the latest version of the language, though. Also, PHP 8 is just around the corner (should be available November 26). You can keep up with this here.

@web4739090954

I have managed to install XAAMP on my Mac now as well. Today in fact.

Brilliant!

@web4739090954

I have barely heard of SQL before. That is some kind of database-language or something right?

You might want to start here: Learn SQL

“Learn to communicate with databases using SQL, the standard data management language.”

---

But yes, you’re right, before diving headfirst into building this popular posts functionality, you should get comfortable with PHP and SQL. Take it slow and enjoy the process

[web4739090954]

Ah great thank you. Would you say SQL is worth the time to learn if I want to work with frontend development? It would still be very good to know how those things work right?

[stetim94]

As a front-end developer you still need to work together with back-end developers (most websites have a back-end these days). So having an understanding about the other one is really helpful.

If you want to build this feature, you would need to learn some back-end. Or find a back-end developer to collaborate with/hire a back-end developer.