Cindr.org

How to create a simple, intuitive search in JS + HTML

Martin B — Wed, 18 Dec 2024 22:51:20 GMT

As a second installment to the "simple, intuitive" solution, I am to walk you through a HTML search that I've used with live websites. It's not the most robust, but its simplicty is worth sharing, and can be useful to implement in simple use cases.

For example, I use it on a page that has 40x cards, and its a quick way to navigate to a card. I don't need fuzzy searching or to query 100,000 rows.

However, searching is an important UI, and this tutorial covers more than just basic string matching on an input field after clicking a button.

Complete code is at the bottom of this page, but I will walk you step by step!

Video Tutorial

0. Boilerplate

Every project starts with boilerplate HTML. Here I have a set of cards, and a table that we can use as search data.




    
    
    Document


    
      
      
    
      
        
          Customer 1
          Name: Jane Doe
          Email: jane.doe@example.com
          Phone: (123) 456-7890
        
        
          Customer 2
          Name: John Smith
          Email: john.smith@example.com
          Phone: (987) 654-3210
        
        
          Customer 3
          Name: Emily Davis
          Email: emily.davis@example.com
          Phone: (555) 123-4567
        
        
          Customer 4
          Name: Michael Brown
          Email: michael.brown@example.com
          Phone: (444) 987-6543
        
      

      
      
          
            
              
                Product Name
                Category
                Price
              
            
            
              
                Wireless Headphones
                Electronics
                $99.99
              
              
                Office Chair
                Furniture
                $149.99
              
              
                Smartphone
                Electronics
                $699.99
              
              
                Coffee Maker
                Appliances
                $49.99
              
              
                Running Shoes
                Sportswear
                $89.99

Product Name	Category	Price
Wireless Headphones	Electronics	$99.99
Office Chair	Furniture	$149.99
Smartphone	Electronics	$699.99
Coffee Maker	Appliances	$49.99
Running Shoes	Sportswear	$89.99

Step 1. Bind our elements

We need to a) know where the search text is coming from and b) know where to search. In some contexts, this is called a needle & a haystack, shown here:

Understading our haystack is two-fold. First, and more simply, it's where we are searching through. However, secondly, and maybe more importantly, it's determining the smallest unit of what we return when we get a positive result.

As shown above, do we show the user the whole card that has a positive text match, or just the paragraph of which it exists in. It's up to you! (The developer, or what the client wants :)). However, it's common that you would return the card, snippet, row, etc. that the data lives in to give context to the data. But if it's the paragraph the user would expect to see, you would give them that.

We will define this as:

    let searchInput = document.getElementById('cardSearchInput');
    let cards = document.querySelectorAll('.card');

We are giving our search in "searchInput", but we are searching through the texts of .cards, so each .card is a unit; and we will also return the whole .card if we find a positive match within it.

Then we will bind a keyup function, so that our search is live to what the user is pressing. This is doable in "smaller" datasets, and will make it feel responsive.

    searchInput.addEventListener('keyup', function(event){
		let searchText = event.target.value.toLowerCase();
		//search code
    }

We now need to compare the search text against what is in each card. We visit each card individually, and ask, "does this card contain the text we are interested in?"

        cards.forEach(function(cardElement){
            let cardText = cardElement.innerText.toLowerCase();
            if(cardText.includes(searchText)){
                cardElement.style.display = 'block';
            } else {
                cardElement.style.display = 'none';
            }
        });

If the answer is yes, give the WHOLE card a style of block, if not, hide it.

That's it.

    let searchInput = document.getElementById('cardSearchInput');
    let cards = document.querySelectorAll('.card');
    //let cards = Array.from(document.getElementById('card-container').children); // returns a live HTMLCollection, so we convert it to an array

    searchInput.addEventListener('keyup', function(event){
        
        cards.forEach(function(cardElement){
            let cardText = cardElement.innerText.toLowerCase();
            if(cardText.includes(searchText)){
                cardElement.style.display = 'block';
            } else {
                cardElement.style.display = 'none';
            }
        });
    });

If you want to abstract it, so you can bind it to any search input; search set combination, I have created a very similar function here

    function bindSearch(inputId, parentId, isTable = false){
        let searchInput = document.getElementById(inputId);
        let searchItems = Array.from(document.getElementById(parentId).children); // returns a live HTMLCollection, so we convert it to an array

        let showStyle = 'block'; 
        if(isTable){
            showStyle = 'table-row'; // when block is applied to a tr, the columns will collapse
        }

        searchInput.addEventListener('keyup', function(event){
            let searchText = event.target.value.toLowerCase();

            searchItems.forEach(function(searchElement){
                let cardText = searchElement.innerText.toLowerCase();
                if(cardText.includes(searchText)){
                    searchElement.style.display = showStyle;
                } else {
                    searchElement.style.display = 'none';
                }
            });
        });
    }

Notice the changes

I take in an inputId, and parentId and isTable
Instead of having to give a class to each search element, I target the parent, and and notice that those ".cards" that we had earlier, are all just first level children of the parent
We have to change the showStyle, if it's a table. Display block will collapse the table columns into a flex behavior

bindSearch('tableSearchInput', 'table-container', true);

After defining the function, call it to bind everything!

How to create a simple, intuitive vanilla JS carousel

Martin B — Wed, 13 Nov 2024 19:14:20 GMT

Carousels are one of those things in web development that can be made to be very complicated. If you look for tutorials out there, there are many great ones, but a lot of them jump to complex animations, extra features, etc. But the simpler ones only flash between divs/images, instead of sliding through multiple elements on a screen.

In this tutorial, I will walk you through an intuitive understanding of Javascript carousels.

Video Guide:

This is a beginner tutorial, aimed to make an intutive JS carousel, it is not necessarily the most correct or "clever".

Step 1: Starter code

Here is some starter code, with very basic HTML and CSS to get us started.

You should see something like this:

Step 2: Style the carousel into a row

The first thing we want to do is style the css further, and get all of our boxes into 1 row (we will call this row the #carousel-track.

We will add the following classes to #carousel-track

    #carousel-track{
        border:1px solid red; /* Shows us what we are working with */
        width:250px;
        height:64px;
        white-space: nowrap; /* Prevents wrapping */
        overflow:hidden;
        font-size:0px;
    }

The weird ``font-size: 0px;`` is to remove unwanted spacing introduced by blank HTML interacting with the inline-block elements that we will make as children to .carousel-item

Ok, we removed the overflow, now add inline-block, recreate the font size removed in the parent, and add a small gap between the items;

    .carousel-item{
        height:64px;
        width:64px;
        background:#333;

        display:inline-block;   
        color:#FFF;
        font-size:16px;
        margin-right:6px;
     
    }

Great! Now our carousel is actually in a row, and the overflow of the carousel is bounded by our track window!

Step 3: Javascript Functionality

Lets add onclick calls to our main function to our two buttons:

Clearly, we are calling one function, with two parameters to move us forward or backward.

In our Javascript, let's create this function and add logic to at least just move something forward:

Had we added

.carousel-item{
    transform: translateX(20px)
}

to carousel item, we would've moved all of our items to the right (+x) by 20 pixels. We want to move the whole class, because we want everyone to move, not just a single element.

However, to move "forward" we have to pull everything to the left, to expose elements on the right. So, forward motion should be translated -x pixels.

To add this to our function, let's move all of our elements forward -x, on each click:

    function moveCarousel(direction) {
        const offset = 68;
        document.querySelectorAll('.carousel-item').forEach(carouselItemElement =>{
            carouselItemElement.style.transform = `translateX(-${offset}px)`;
        })
    }

If you want to see the animation better, add a transition to the elements:

    .carousel-item{
        height:64px;
        width:64px;
        background:#333;

        display:inline-block;   
        color:#FFF;
        font-size:16px;
        margin-right:6px;

        transition: transform 0.3s ease;
    }

Notice that this only works on the first click? Because our elements have been moved TO the -68px position, and every other click, they are already there. So we are not adding to the position, we are just setting it.

So let's "add to our position", by multiplying the -68 by the number of times we have clicked the button, and increase the position everytime we click it.

    var position = 0;
    function moveCarousel(direction) {
        position++;
        const offset = 68*position;
        
        document.querySelectorAll('.carousel-item').forEach(carouselItemElement =>{
            carouselItemElement.style.transform = `translateX(-${offset}px)`;
        })
    }

Perfect, now let's move our position backward for the the other button.

In order to do this, we need to decrease our offset, therefore, just decrease our "desired" position

    var position = 0;
    function moveCarousel(direction) {
        if(direction=='forward'){
            position++;
        }
        else if(direction=='backward'){
            position--;
        }

        const offset = 68*position;

        document.querySelectorAll('.carousel-item').forEach(carouselItemElement =>{
            carouselItemElement.style.transform = `translateX(-${offset}px)`;
        })
    }

Finally, let's add a gaurd and prevent the function running forward if it's over the boundry, or backward, if it's less than 0.

    var position = 0;

    function moveCarousel(direction) {
        if(direction=='forward'){
            if(position==3){
                return false;
            }
            position++;
        }
        else if(direction=='backward'){
            if(position==0){
                return false;
            }
            position--;
        }

        const offset = 68 * position;
        document.querySelectorAll('.carousel-item').forEach(carouselItemElement =>{
            carouselItemElement.style.transform = `translateX(-${offset}px)`;
        })
    }

That's it! You're done! From here, you can expand on it as you wish.

Full Code:

How to get a Discord User's Server Roles using PHP and Redirect With Simple Permissions

Martin B — Sat, 29 Jul 2023 20:48:34 GMT

Here is the scenario. You want to log a user into your website, and then see if they have the required role (from your discord server) to view something on your site. In my example, I will redirect admins to a special page, moderators to their page, and the rest of users to a regular, login protected page.

Video Tutorial:

Source Code:

Check out the GitHub if you want to start with a plug-n-play template:

Getting Started:

Start with my Login with Discord (PHP) tutorial on YouTube. It's about 20 minutes, but will get you up to speed on how to set up your discord developer account, and make some API calls with PHP!

1) Update your OAuth URL

If you followed the tutorial, your redirect URL probably looks like this:

https://discord.com/api/oauth2/authorize?client_id=11349347517325240&redirect_uri=http%3A%2F%2Flocalhost%3A5000%2Fsrc%2Fprocess-oauth.php&response_type=code&scope=identify

Because we only picked the "scope" permission.

To get the user's roles, we need the guilds.members.read permission as well.

To add that into your URL, head on over to the Discord Developer Dashboard, and go to your application, and check the additional scope as seen here:

Now, copy the OAuth URL and paste it into your init-oauth.php file.

2) Update your API Page (process-oauth.php)

Here is where we can now use our new permission to get information about the user's roles.

Get your server's guild id

Before we can do anything to find out the role of a user on a discord server, we needs its guild id.

Right click your discord server icon on discord, and select the bottom option "Copy Server ID"

For example, mine is 98672642795098937

Get the user's role by passing the guild id

In process-oauth.php, let's make a function that takes in the access-token discord gave us, and search "our" roles on a discord server by passing it's guild id

function getGuildObject($access_token, $guild_id){
        //requires the following scope: guilds.members.read
        $discord_api_url = "https://discordapp.com/api";
        $header = array("Authorization: Bearer $access_token","Content-Type: application/x-www-form-urlencoded");
        $ch = curl_init();
        //set the url, number of POST vars, POST data
        curl_setopt($ch, CURLOPT_HTTPHEADER,$header);
        curl_setopt($ch,CURLOPT_URL, $discord_api_url.'/users/@me/guilds/'.$guild_id.'/member');
        curl_setopt($ch,CURLOPT_POST, false);
        //curl_setopt($ch,CURLOPT_POSTFIELDS, $fields_string);
        curl_setopt($ch,CURLOPT_RETURNTRANSFER, true);
        curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);
        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0);
        $result = curl_exec($ch);
        $result = json_decode($result,true);
        return $result;
}

The guild object will return something like this...

Array
(
    [avatar] => 
    [communication_disabled_until] => 
    [flags] => 0
    [joined_at] => 2022-06-15T20:18:32.991000+00:00
    [nick] => 
    [pending] => 
    [premium_since] => 
    [roles] => Array
        (
            [0] => 1134940682650402968
        )

    [user] => Array
        (
            [id] => 118583685640355840
            [username] => Exit
            [avatar] => f2e98ae1156588254d4a6e3d9197fc8e
            [discriminator] => 9063
            [public_flags] => 0
            [flags] => 0
            [banner] => 
            [accent_color] => 
            [global_name] => Exit
            [avatar_decoration] => 
            [banner_color] => 
        )

    [mute] => 
    [deaf] => 
    [bio] => 
    [banner] => 
)

Oh look! We have a roles array.

Let's access it, and test if it has a role that we care about.

$guild_roles = $guildObject['roles'];
// see if roles has the correct role_id within the array

$role = 'user';
if(in_array('1134940795481370646', $guild_roles)){
    $role = 'admin';
}else if(in_array('1134940682650402968', $guild_roles)){
    $role = 'moderator';
}

How do I know what 1134940795481370646 is?
Go to Server Settings > Roles >> Copy Role Id

Ok, now let's update the user's session, so we can keep track of their role. Also, we can redirect them to their special, protected page!

$_SESSION['logged_in'] = true;
$_SESSION['userData'] = [
    'name'=>$result['username'],
    'discord_id'=>$result['id'],
    'avatar'=>$result['avatar'],
    'role'=>$role,
];


if($role=='admin'){
    header("location: admin-lounge.php");
}else if($role=='moderator'){
    header("location: moderator-lounge.php");
}else{
    header("location: dashboard.php");
}
exit();

Here's an example of the admin-lounge.php page

Create a simple sound output switch via Terminal in Linux & Bind it to a Key

Martin B — Thu, 26 Jan 2023 14:20:00 GMT

Since I've switched from Windows to Linux, I've tried to make sure that all the tools I had on my Windows OS were available on Linux. I had a program called SoundSwitch that let me bind a hotkey to toggle through audio devices.

It was a simple program, but Linux makes this easy to do in a few lines.

I will be using Zorin OS for this tutorial as well.

Terminal Commands

The first command you need is:

pactl list sinks short | awk -F '\t' '{print $1,$2,$5}'

This will list your audio sources and extract out relavant information into line delimited list.

Mine outputs:

1 alsa_output.usb-Blue_Microphones_Yeti_Stereo_Microphone_REV8-00.iec958-stereo SUSPENDED
6 alsa_output.pci-0000_58_00.4.analog-stereo RUNNING
14 alsa_output.pci-0000_56_00.1.hdmi-stereo-extra4 SUSPENDED

Notice how there is an id, a reference name, and then its status. I realized that I want to switch between the Yeti output, and the analog-stero output.

The manual command for this is:

pacmd set-default-sink NUMBER_ID_OF_SINK

So for setting it back to my Yeti mic, I would execute:

pacmd set-default-sink 1

With this in mind, I have written a simple script to list out my inputs, get the selected input, and then swtich between the microphone or the speaker. Note, the IDs are dynamic, so you need to make sure you have a way to read/execute on them, and not just hard code in id=1, 6, 14, etc..

Making a bash script to switch between sources

#!/bin/bash

list=$(pactl list sinks short | awk -F '\t' '{print $1,$2,$5}')

selected_index_string=$(echo "$list" | grep "RUNNING")
yeti_index_string=$(echo "$list" | grep "Yeti")
stero_index_string=$(echo "$list" | grep "analog-stereo")

# Print the index of the line that has "RUNNING" in it
if [ "${selected_index_string}" == "${yeti_index_string}" ]; then
    pacmd set-default-sink ${stero_index_string:0:2} # speakers
else
    pacmd set-default-sink ${yeti_index_string:0:2} # microphone
fi

Adding a Keybind to execute the Script

In ZorinOS go to settings, Keyboard Shortcuts, hit add new (the plus at the very bottom)

Name your shortcut, and give a path to the file

Make sure that you

chmod +x script_name.sh

To make it executable.

Thats it!

How to Create a Simple Discord Bot using Python

Idean — Thu, 27 Oct 2022 23:32:17 GMT

This will be a short guide on creating a simple Discord bot using Python.

Initial Setup

We will need to install a few things and setup our workspace before we get started.

Install Python

The first ting we will need is Python, you can download the latest version from python.org or using your package manager on Linux.

Make sure to select Add Python to PATH when installing on Windows.

Python Setup Window

Setup Workspace

Install Discord.py

After installing python we can use pip to install Discord.py. Use one of the following commands depending on your OS and voice support.

Windows

py -3 -m pip install -U discord.py

py -3 -m pip install -U discord.py[voice]

Linux

python3 -m pip install -U discord.py

python3 -m pip install -U discord.py[voice]

On Linux you will need these dependencies for voice. You can use this command for Debian based systems. You can usually just install these with your package manager.

apt install libffi-dev libnacl-dev python3-dev

Create Bot Application

Next you will create a new application and bot account on the Discord Application Development Page.

Create a new application then in the application menu click Bot and then Add a new Bot account.

Application Settings Menu

Once the bot account is created you will need to select the intents your Bot will need, you can change these later. But for your bot to respond to messages you should enable the Message Content Intent.

Bot Settings Page

Finally copy the bot token. You will need this to run your bot.

Add Bot to Server

In the application settings menu click on OAuth2 then URL Generator.

OAuth2 Settings

Under Scopes select Bot and copy the URL into your browser. You should get a popup allowing you to add your bot to your server.

URL Generator

Create a Simple Bot

Basic Template

This is a starter template from the Discord.py Docs. Fill in your bot token and then run the file to start your bot.

import discord

class MyClient(discord.Client):
    async def on_ready(self):
        print(f'Logged on as {self.user}!')

    async def on_message(self, message):
        print(f'Message from {message.author}: {message.content}')

intents = discord.Intents.default()
intents.message_content = True

client = MyClient(intents=intents)
client.run('TOKEN HERE')

python bot.py

You should have your bot online now.

Add a discord user to your database (Login with Discord OAuth) in PHP

Martin B — Sun, 23 Oct 2022 01:02:10 GMT

This is a follow up to how to make a login with discord button in PHP tutorial I made not too long ago.

Here, the objective is simple. Take that authenticated user and add them to our database. If they are already in there, just log them in.

Finally, we will want to visualize our database, and output all of our joined users.

Video tutorial:

https://youtu.be/A9fhwOHZSdU

Setting up your database

You need a way to access a mysql database. In my tutorial I have a locally hosted php server on WAMP, but you can use an external database, a locally hosted mysql server, WSL, etc.

In conjunction with WAMP, I'm using phpmyadmin to access my database. Again, you can use whatever you want to access your database, phpmyadmin is just very common for beginners using php+mysql.

Step 1: Create the database

On the left side of the screen, hit new, and then navigate to the "Database Name" field.

Enter in your database name. I will be naming it "new_application"

Step 2: Create a table

In your new database, on the first tab, create your table, enter your name, and select 4 for your number of columns

Step 3: Create your columns

In your four columns, create an

id (INT, autoincrement, primary key);

discord_id (varchar(255)),

discord_avatar (varchar(255)),

and created_at (timestamp(CURRENT_TIME).

Your first column is your primary key. It will be automatically incremented by mySQL each time you create a new column. We don't have to worry about setting it.

You will supply the discord id given by our OAuth scheme, as seen in the previous tutorial.

Likewise, discord_avatar will be entered in.

Finally, created_at is just a timestamp marker of when we first inserted the user. Good for knowing when your users joined.

Connecting to your database in PHP

Now, head over to your project folder and create db.php

Add the this basic connection code to connect to your database.

Add connection code (PDO)

setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

  echo "Connected successfully";
}
catch(PDOException $e){
  echo "Connection failed: " . $e->getMessage();
}

We need a username and a password to connect to our database

Let's create one in phpmyadmin.

Go to your database, and hit the privilege's tab

At the bottom of that screen, hit Add user account

Create a username, hostname (% or any), password, and select grant all priviledges

Hit Go, and add those credentials to your db.php file.

setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

  echo "Connected successfully";
}
catch(PDOException $e){
  echo "Connection failed: " . $e->getMessage();
}

Head over to your project, and see if your database connection is successful:

http://localhost/login-with-discord/src/db.php

Creating functions to add a user to our database

In your db.php file, test a basic mySQL insert statement:

setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

  echo "Connected successfully";
}
catch(PDOException $e){
  echo "Connection failed: " . $e->getMessage();
}

function addUserToDatabase($pdo,$discord_id,$discord_avatar){
    $sql = "INSERT INTO users (discord_id,discord_avatar) VALUES (:discord_id,:discord_avatar)";
    try {
        $stmt = $pdo->prepare($sql);
        $stmt->execute([
            'discord_id'=>$discord_id,
            'discord_avatar'=>$discord_avatar,
        ]);
        echo 'inserted successfully';
    } catch (Exception $e) {
        echo $e;
    }
}

addUserToDatabase($pdo,'test','test');

Execute db.php, and check your database to see if it worked:

Great, now let's retrieve a user by a discord id (to see if one exists)

Add this function to the same file:

function getUserFromDatabase($pdo,$discord_id){
    $sql = "SELECT * FROM users WHERE discord_id=:discord_id";
    try {
        $stmt = $pdo->prepare($sql);
        $stmt->execute([
            'discord_id'=>$discord_id,
        ]);
        $data = $stmt->fetch(PDO::FETCH_ASSOC);
        return $data;
    } catch (Exception $e) {
        echo $e;
    }
}

$discord_id = 'test';
$user_data = getUserFromDatabase($pdo,$discord_id);

if($user_data){
    echo 'user exists:';
    print_r($user_data);
}else{
    echo 'no user exists';
}

We just added discord_id test, and so we will retrieve it to.

Finally, let's make a function that gets all discord users from our database:

function getAllUsersFromDatabase($pdo){
    $sql = "SELECT * FROM users";
    try {
        $stmt = $pdo->prepare($sql);
        $stmt->execute();
        $data = $stmt->fetchAll(PDO::FETCH_ASSOC);
        return $data;
    } catch (Exception $e) {
        echo $e;
    }
}

Let's output it on our users.php page

Now, add your php to the header to include our database functions file, as well as our get all users function.

Loop through it to add to html markup, and then print it in the html:

 $userData) {
    $usersMarkup.=''.$userData['discord_id'].'';
}

?>



  
  
  
  


    
        
            Users:

We are now outputting users:

Finally, add the user via discord authentication, checking if the user exists in the database, and if not inserting them.

Good news is that we have the two functions for this, so let's head over to process-oauth

//Add this to the top of process-oauth.php
include('db.php');

$userData = json_decode($result,true);

$user_data = getUserFromDatabase($pdo,$userData['id']);

if(!$user_data){
    addUserToDatabase($pdo,$userData['id'],$userData['avatar']);
}


$_SESSION['logged_in'] = true;
$_SESSION['userData'] = [
    'discord_id'=>$userData['id'],
    'name'=>$userData['username'],
    'avatar'=>$userData['avatar'],
];
header("location: dashboard.php");
exit();

Get the image to our user list in our markup of users.php:

$usersMarkup.='

    
    '.$userData['discord_id'].'
';

How to join a user to a discord server, get a list of their servers (PHP, OAuth2.0)

Martin B — Fri, 19 Aug 2022 14:18:38 GMT

I've been getting a lot of requests to get a list of a user's guilds on discord, and all you have to do is modify the original login with discord code a little bit.

Video

Written Guide

Here are a list of changes

Add scopes to the URL
Add a joinGuild function
Add a getGuildsList function
Create a bot, add it to your server, and give it the right permissions
Markup the user's guilds

So, if you haven't' already, we will start at the last tutorial's end:

How to create a login with Discord button in PHP

Video TutorialCurrently, this tutorial is in video form only. We are working on a companionguide on the website! Feel free to comment on the video if you have any questions regarding thetutorial!

Cindr.orgMartin B

Getting a new URL

Generate yourself a new URL:

Update your init-oauth.php file

Handling the bot

Create the bot:

Create the bot by heading to the https://discord.com/developers/applications/ and going to the same application that handles your OAuth. Create the bot.

Invite the bot to your server:

Go to OAuth, URL Generator, and select all of these scopes (this will give your bot permission to read the oauth data, and add the user via bot)

Finally, click on the link as the server owner, and add the bot to your server!

Adding Process Functions

Then, head on over to the proccess-oauth.php file and add the two new functions:

function addUserToGuild($discord_ID,$token,$guild_ID){
    $payload = [
        'access_token'=>$token,
    ];

    $discord_api_url = 'https://discordapp.com/api/guilds/'.$guild_ID.'/members/'.$discord_ID;

    $bot_token = "YOUR BOT TOKEN (SAME AS APPLICATION)";
    $header = array("Authorization: Bot $bot_token", "Content-Type: application/json");

    $ch = curl_init();
    //set the url, number of POST vars, POST data
    curl_setopt($ch, CURLOPT_HTTPHEADER,$header);
    curl_setopt($ch,CURLOPT_URL, $discord_api_url);
    curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "PUT"); //must be put for this method..
    curl_setopt($ch,CURLOPT_POSTFIELDS, json_encode($payload)); //must be a json body
    curl_setopt($ch,CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0);

    $result = curl_exec($ch);
    
    if(!$result){
        echo curl_error($ch);
    }else{
        return true;
    }
}

function getUsersGuilds($auth_token){
    //url scheme /users/@me/guilds
    $discord_api_url = "https://discordapp.com/api";
    $header = array("Authorization: Bearer $auth_token","Content-Type: application/x-www-form-urlencoded");
    $ch = curl_init();
    //set the url, number of POST vars, POST data
    curl_setopt($ch, CURLOPT_HTTPHEADER,$header);
    curl_setopt($ch,CURLOPT_URL, $discord_api_url.'/users/@me/guilds');
    curl_setopt($ch,CURLOPT_POST, false);
    //curl_setopt($ch,CURLOPT_POSTFIELDS, $fields_string);
    curl_setopt($ch,CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0);
    $result = curl_exec($ch);
    $result = json_decode($result,true);
    return $result;
}

The first function is a little bit tricky. We had to change the method to PUT using the CURLOPT_CUSTOMREQUEST parameter. Additionally, it insisted it wanted a json body so we encoded the token into that data format.

The getUsersGuilds is very similar to getting the user's data, however, this time it's /users/@me/guilds.

Now, let's actually use these functions in our code:

I'm adding the user to my guild when I also fetch their user data, here is the area:

 $guild_ID = '986726427950989372';
 $addUserToGuild = addUserToGuild($result['id'],$access_token,$guild_ID);

Additionally, if you want to fetch their guild data, I will just append the function into my session variable:

$_SESSION['userData'] = [
    'discord_id'=>$userData['id'],
    'name'=>$userData['username'],
    'avatar'=>$userData['avatar'],
    'guilds'=>getUsersGuilds($access_token)
];

Finally, markup your new guild data:

Add this to the head of the file;

$guilds = $_SESSION['userData']['guilds'];
$guildMarkup='';

foreach ($guilds as $key => $guildData) {
    $guildMarkup.=''.$guildData['name'].'';
}

And this to your HTML body:


    Guilds:

Finally, update your css file to get some of those new tailwind classes:

A simple login with Discord using PHP. Contribute to mbouldo/login-with-discord-php development by creating an account on GitHub.

GitHubmbouldo

How to Host a Free Static Website with GitHub Pages

Idean — Sun, 17 Jul 2022 01:40:12 GMT

With GitHub Pages you can host a free static website. This is useful for simple sites such as personal blogs or portfolio sites.

The information for this guide was taken from the official GitHub Documentation located here. If you prefer a more detailed explanation you can read it there however it can be a bit confusing and I provide examples for some of the parts that caused me problems such as setting up the DNS records.

Creating the Repository

The first step is to create a new public repository with the following name. You can do that using this link https://github.com/new. Make sure the entire repo name is lowercase.

.github.io

Create a new GitHub Repository for our static site.

You can change the remaining settings however you like.

Creating the Website

To test the site I added a basic index.html template to the repository.




    
    
    
    Document


    Test Page

Now visiting https://.github.io should show you the index page.

Using a Custom Domain (Optional)

DNS Settings

If you wanted to use a custom domain with your site you will need to create DNS records pointing to your repository.

These are my records I created using Google Domains

DNS Records

A Records

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

AAAA Records

2606:50c0:8000::153
2606:50c0:8001::153
2606:50c0:8002::153
2606:50c0:8003::153

CNAME Record

.github.io

You can find more details regarding this topic on the GitHub docs located here.

Change Repository Settings

After creating the DNS records go back to your repository and go to Settings > Pages. You will want to enter your domain in the Custom domain field and click save.

Repository Pages Settings

After clicking save it will perform a DNS check to ensure your settings are correct. It can take up to an hour for the DNS records to update but for me it happened within a few minutes.

If you are unable to enable Enforce HTTPS you may need to wait for a few minutes then refresh the page.

Adding a Theme (Optional)

You can add a premade Jekyll theme to your repository from the Pages settings located at Settings > Pages.

GitHub Pages Theme Chooser

This will add a basic theme to all Markdown files in the repository. For details on how to customize the layout of these pages refer to the Jekyll Documentation.

To add the theme to our index.html page you need to add the Jekyll Front Matter to the top of the file.

---
layout: default
title: Home Page
---

The index page should now have the theme applied.

Index Page with Theme Applied

Conclusion

Here are some other useful guides you can use to create your website.

Using Jekyll with GitHub Pages (Coming Soon)
Using a Custom Jekyll Theme with GitHub Pages (Coming Soon)
Official GitHub Pages Documentation
Official GitHub Pages Jekyll Documentation

Add Events to a Mapbox map via PHP

Martin B — Sat, 02 Jul 2022 22:34:08 GMT

Adding a map to your application is very easy to do these days. You might use the more popular google maps, but Mapbox makes this process really simple. In order to create a map, you will use Javascript, but to save and provide data for the map we will use php.

Video Guide:

Source Code:

GitHub - mbouldo/mapbox-events-php: Add events to a map via mapbox & retrieve data async via JS and PHP

Add events to a map via mapbox & retrieve data async via JS and PHP - GitHub - mbouldo/mapbox-events-php: Add events to a map via mapbox & retrieve data async via JS and PHP

GitHubmbouldo

Helpful Links:

Maps | Mapbox

Unparalleled speed and customization to visualize your world.

Mapbox

Documentation

Examples, tutorials, and API references to help you start building with Mapbox.

Mapbox

Installation | Mapbox GL JS

Get started with Mapbox GL JS.

Mapbox

Written Guide:

Basic Pages, and styles

Basic HTML


    
    
        
        
            
        

        
        
            
            Add an Event
        

        
        
            Event Name
            
        

        
            Event
                Description
            
        
        
        
            Event Address

Styles

mapbox-events-php/output.css at main · mbouldo/mapbox-events-php

Add events to a map via mapbox & retrieve data async via JS and PHP - mapbox-events-php/output.css at main · mbouldo/mapbox-events-php

GitHubmbouldo

Header Dependencies

Mapbox, JQuery Dependencies

Initialize Your Map (In a script tag)

mapboxgl.accessToken = 'YOUR_MAPBOX_TOKEN_HERE';

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [-77.04, 38.907],
    zoom: 11.15
});

Get Events Data & Add to Map

Load an icons layer onto your map

map.on('load', function () {
    //place object we will add our events to
    map.addSource('places',{
        'type': 'geojson',
        'data': {
            'type': 'FeatureCollection',
            'features': []
        }
    });
    //add place object to map
    map.addLayer({
        'id': 'places',
        'type': 'symbol',
        'source': 'places',
        'layout': {
            'icon-image': '{icon}',
            'icon-allow-overlap': true
        }
    });

    //Handle popups
    map.on('click', 'places', (e) => {
        const coordinates = e.features[0].geometry.coordinates.slice();
        const description = e.features[0].properties.description;
        while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
            coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
    }
    new mapboxgl.Popup()
        .setLngLat(coordinates)
        .setHTML(description)
        .addTo(map);
    });

    //Handle pointer styles
    map.on('mouseenter', 'places', () => {
        map.getCanvas().style.cursor = 'pointer';
    });
    map.on('mouseleave', 'places', () => {
        map.getCanvas().style.cursor = '';
    });

    //get our data from php function
    //getAllEvents();
});

Async get events data from PHP

function getAllEvents(){
    $.ajax({
        url: "../api/getAllEvents.php",
        contentType: "application/json",
        dataType: "json",
        success: function (eventData) {
            console.log(eventData)
            map.getSource('places').setData({
                    'type': 'FeatureCollection',
                    'features': eventData
            });
        },
        error: function (e) {
            console.log(e);
        }
    });
}

Create a new database

Add an events table

Create your id, event, lat, lng columns, name, and description

Your table should look like this:

Connect your PHP file that handles events to your DB

setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    //echo "Connected successfully";
}
catch(PDOException $e){
    //echo "Connection failed: " . $e->getMessage();
}

function p($arr){
    echo "";
        print_r($arr);
    echo "";
}

Get event data from your events table

$sql = "SELECT * FROM events";

try {
    $stmt = $pdo->prepare($sql);
    $stmt->execute();
    $data = $stmt->fetchAll(PDO::FETCH_ASSOC);

} catch (Exception $e) {
    die($e);
}

Morph your $data from mySQL Into json Mapbox can use

foreach ($data as $key => $eventData) {
    $returnData[] = [
        'type' => 'Feature'.$eventData['id'],
        'properties' => [
            'description' => ''.$eventData['name'].''.$eventData['description'].'',
            'icon' => 'rocket-15'
        ],
        'geometry' => [
            'type' => 'Point',
            'coordinates' => [$eventData['lat'], $eventData['lng']]
        ]
    ];
}

Set your headers to support json, and echo out your json

//top of file
header('Content-Type: application/json; charset=utf-8');
include('db.php');

//bottom of file
echo json_encode($returnData);

Test your first event, by adding it into your mySQL

INSERT INTO `events` (`id`, `name`, `description`, `lat`, `lng`) VALUES (NULL, 'Manual mySQL', 'Test mySQL event', '-77.0877945', '38.937867');

Add events to your database:

Your php file will contain a simple PDO sql statement that will insert all of the posted variables, including name, description, lat, and lng

PHP Process File that will add to DB

prepare($sql);
        $stmt->execute([
            'name'=>$_POST['name'],
            'description'=>$_POST['description'],
            'lat'=>$_POST['lat'],
            'lng'=>$_POST['lng'],
        ]);

        echo json_encode('success');
    
    } catch (Exception $e) {
        die($e);
    }
}

Async JavaScript file to call your API file

function addEvent(){
    $.ajax({
        url: "../api/createEvent.php",
        type:'POST',
        data:postObj,
        dataType: "json",
        success: function (resp) {
            
        },
        error: function (e) {
            console.log(e);
        }
    });
}

Initialize Your Geocoder to get lat, lng data

const geocoder = new MapboxGeocoder({
    accessToken: mapboxgl.accessToken,
});

geocoder.addTo('#geocoder');

var geocoderResult = {};
geocoder.on('result', (e) => {
    geocoderResult = e.result, null, 2;
});

// Clear results container when search is cleared.
geocoder.on('clear', () => {
    geocoderResult = {};
});

Validate if geocoder is set & set postData

    if(geocoderResult=={}){
        return false;
    }
    var postObj = {
        name:$("#eventName").val(),
        description:$("#eventDescription").val(),
        lat:geocoderResult.center[0],
        lng:geocoderResult.center[1],
    }

Handle success when event is created

//reset form & get new data
$("#eventName").val('');
$("#eventDescription").val('');
geocoder.clear();
getAllEvents();

How Create a Windows 11 Virtual Machine using Hyper-V

Idean — Tue, 07 Jun 2022 17:16:56 GMT

Video Guide

Enable Hyper-V

System Requirements

Windows 10 Pro
A 64-bit processor
At least 4 GB of RAM
Virtualization support turned on in the BIOS or UEFI

You can check if you meet the requirements by running this command in PowerShell or command prompt.

Systeminfo.exe

Hyper-V Requirements:      VM Monitor Mode Extensions: Yes
                           Virtualization Enabled In Firmware: Yes
                           Second Level Address Translation: Yes
                           Data Execution Prevention Available: Yes

Expected Result

Enable Virtualization in Bios

Look for a setting called Intel Virtualization Technology (Intel VT) or AMD Virtualization technology (AMD-V). After enabling you should be able to turn on Hyper-V.

This is usually located in the advanced settings under CPU. Some motherboards will have you in advanced mode automatically.

Turn on Hyper-V

The easiest way to enable Hyper-V is to search for

Turn Windows features on or off

in the search bar and then tick the check box next to Hyper-V. You will need to reboot.

Search for the Windows Features Menu

Enable Hyper-V

Create the Virtual Machine

Hyper-V Interface

Option 1: Use Windows 11 Dev Environment

Click on Quick Create and select Windows 11 dev environment then create. It will download the necessary files.

This is an evaluation copy and it will expire eventually however if you just need somewhere to test things this is the easiest method.

You can learn more about the evaluation copy here.

Option 2: Use Windows 11 ISO

You can download the Windows 11 ISO file here. Make sure to read the requirements and warnings.

After downloading the file you want to click Quick Create and select Local installation source.

VM Settings

The basic settings you want to change are the Memory and Processor settings. You should set them based on how much resources you have available on your computer and your indented use for the VM.

The minimum requirements for Windows 11 are 4 GB of ram and 2 processor cores. You can read the rest of the requirements here.

System requirements:

RAM 4 gigabyte (GB)
Processor 1 GHz or faster with 2 or more cores 64-bit

VM Settings

You can change the other settings now you edit them later. Once you are done click connect and you should be able to start using your new Windows 11 Virtual Machine.

How to make a login with Discord button using JavaScript (Express)

Martin B — Mon, 06 Jun 2022 00:25:18 GMT

Video Tutorial

Getting Started

I made a CSS stylesheet using tailwind that is included in the source files. Additionally, I made two pages: index.html, and dashboard.html, which will serve to direct the user to login with discord, and then show them their logged in state.

Additionally, the "server" is handled using express js.

Coding

Installing Dependencies

Luckily, we only need express js for this project. A real project would be more complex and need a few more things, but we will build off of this.

npm install express

Starter HTML

First, we will make an index.html (home page)




  
  
  
  
  


    
        
            
            Login with Discord

Next, we will make a dashboard.html (logged in page)




  
  
  
  
  


    
        Welcome to the dashboard,
        
            
            
        
        Logout

Don't worry about the style sheet not loading. We will fix this using express routing to allow static files to show up

Express Server Setup

Create an index.js file and initialize express js.

const path = require('path');
const express = require('express');


const app = express();

We will also use a public folder to serve our static output.css file, so create that directory, add your css in there and add this line to your code

app.use('',express.static(path.join(__dirname, 'public')));

Next, we will add two routes, one for our default that will route to index, and the other for the logged in state when we go through the /auth/discord route

app.get('/', (request, response) => {
	return response.sendFile('index.html', { root: '.' });
});

app.get('/auth/discord', (request, response) => {
	return response.sendFile('dashboard.html', { root: '.' });
});

We will be serving those files respectively,

Finally, specify which port your server will run on, and start your server.

const port = '53134';
app.listen(port, () => console.log(`App listening at http://localhost:${port}`));

We should be able to navigate through to our index page if we visit the url: http://localhost:53134/

Creating a redirect:

Head on over to the discord developer portal and go to applications:

From there, create a new application

Specify a name

Once created, click on OAuth2 on the side and select "General"

Adding a redirect

Add the following redirect which corresponds to your local host server, and the path that we want express to route from:

http://localhost:53134/auth/discord

Getting a redirect url

Next, we can use discord to generate us a redirect url, by selecting identity and generating a dynamic url from one of our redirects

Copy that url, and paste it into your index.html anchor tag

Make sure to change &response_type=code to &response_type=token

Handling our response and auth code:

We will deconstruct the get parameters sent to us onload, and redirect the user back to the index screen if they didn't pass them

window.onload = () => {
const fragment = new URLSearchParams(window.location.hash.slice(1));
const [accessToken, tokenType] = [fragment.get('access_token'), fragment.get('token_type')];

if (!accessToken) {
    window.location.href('/')
    return (document.getElementById('login').style.display = 'block');
}


};

Next, we will handle fetching the data about the user by passing an auth bearer header to discord, and receiving data back about the user

fetch('https://discord.com/api/users/@me', {
    headers: {
        authorization: `${tokenType} ${accessToken}`,
    },
})
.then(result => result.json())
.then(response => {
    //handle response
})
.catch(console.error);

Finally, we will change our DOM html to reflect the new data we just received, and we are done!

const { username, discriminator, avatar, id} = response;
//set the welcome username string
document.getElementById('name').innerText = ` ${username}#${discriminator}`;

//set the avatar image by constructing a url to access discord's cdn
document.getElementById("avatar").src = `https://cdn.discordapp.com/avatars/${id}/${avatar}.jpg`;

How to make a login with Steam button with PHP (OpenID)

Martin B — Thu, 19 May 2022 13:59:52 GMT

Video Tutorial

Source Code

GitHub - mbouldo/login-with-steam-php: A simple login with Steam starter project using open ID and PHP

A simple login with Steam starter project using open ID and PHP - GitHub - mbouldo/login-with-steam-php: A simple login with Steam starter project using open ID and PHP

GitHubmbouldo

Getting Started

Starter HTML & File Structure

Similar to my "Login with Discord PHP" guide, we will have a basic landing page with a button to navigate to the auth page (steam), and then be redirected back to a login protected dashboard page.

Therefore, index.php handles the homepage. dashboard.php is the login protected dashboard. init-openId.php will build parameters and redirect the user to steam.com, and finally, process-openId.php will listen for steam's return data on the authentication.

The rest of the files uses such as error.php, and logout.php are not essential, but help with error handling and destroying the user's session after they have successfully logged in.

Finally, a tailwind generated output.css is used for basic styling and can be found in the source code repository.

Starter index.php




  
  
  
  


    
        
            
            Login with Steam

Starter dashboard.php




  
  
  
  


    
        Welcome to the dashboard,
        {{username}}
        Logout

In order to not allow a random user to directly access this URL, we will start a session at the top of the page and see if the session variable: logged_in is equal to true. Currently, it will be undefined. But we will see it later in the application.

Add this to the top of the dashboard.php page:

session_start();
if(!$_SESSION['logged_in']){
    header("location: error.php");
    exit();
}

error.php will be text you want to show the user to notify them they are not logged in.

Redirecting the user for the first time

In my opinion, it's a good idea to have a separate redirect page to initiate external authorization. This wasn't really obvious with discord which just used a hardcoded URL; here, we will need to build more complex parameters.

Building open Id parameters:

We need to construct the following paramters which will be passed as a GET query to the intial URL. It will tell steam what protocol we will use, and how to redirect our user back to our server.

$login_url_params = [
    'openid.ns'         => 'http://specs.openid.net/auth/2.0',
    'openid.mode'       => 'checkid_setup',
    'openid.return_to'  => 'http://localhost/login-with-steam-yt/process-openId.php',
    'openid.realm'      => (!empty($_SERVER['HTTPS']) ? 'https' : 'http').'://'.$_SERVER['HTTP_HOST'],
    'openid.identity'   => 'http://specs.openid.net/auth/2.0/identifier_select',
    'openid.claimed_id' => 'http://specs.openid.net/auth/2.0/identifier_select',
];

Constructing our URL from the parameters, and redirecting

$steam_login_url = 'https://steamcommunity.com/openid/login'.'?'.http_build_query($login_url_params, '', '&');

header("location: $steam_login_url");
exit();

If you did set up your URL correctly, the steam page should look like this:

And once logged in, will look like this:

What happens after the user "logs in"

Steam will validate the authentication internally, and then communicate to the OpenID API to compose a request to send back to you, and your server. (We specified the "our server endpoint" in those initial parameters).

So, we need a file to receive that incoming request, and process the new data we have.

We are expecting information some kind of token to reference who in fact was validated. Steam will not directly say "Jimmy" was validated, because you could spoof this information.

The token we receive is in the form of a long set of $_GET parameters, looking a little like this:

Array
(
    [openid_ns] => http://specs.openid.net/auth/2.0
    [openid_mode] => id_res
    [openid_op_endpoint] => https://steamcommunity.com/openid/login
    [openid_claimed_id] => https://steamcommunity.com/openid/id/76561198068485408
    [openid_identity] => https://steamcommunity.com/openid/id/76561198068485408
    [openid_return_to] => http://localhost/login-with-steam-yt/process-openId.php
    [openid_response_nonce] => 2022-05-20T02:22:02ZL9LZ+XnIhRJAYbiXMNGhaWfAF8c=
    [openid_assoc_handle] => 1234567890
    [openid_signed] => signed,op_endpoint,claimed_id,identity,return_to,response_nonce,assoc_handle
    [openid_sig] => Td6XOTHOCYU22oABLocdFvgsGBk=
)

We will take this data, and pass it to steam's open id handler, to see if the request is valid, and see who was validated (steam id).

Constructing parameters to send to steam open id

Initially, we can hardcode some parameters, and then we can

    $params = [
        'openid.assoc_handle' => $_GET['openid_assoc_handle'],
        'openid.signed'       => $_GET['openid_signed'],
        'openid.sig'          => $_GET['openid_sig'],
        'openid.ns'           => 'http://specs.openid.net/auth/2.0',
        'openid.mode'         => 'check_authentication',
    ];

dynamically use the $_GET['openid_signed'] parameter to construct more parameters like so

    $signed = explode(',', $_GET['openid_signed']);
    
    foreach ($signed as $item) {
        $val = $_GET['openid_'.str_replace('.', '_', $item)];
        $params['openid.'.$item] = stripslashes($val);
    }

Your parameters should look like this:

Array
(
    [openid.assoc_handle] => 1234567890
    [openid.signed] => signed,op_endpoint,claimed_id,identity,return_to,response_nonce,assoc_handle
    [openid.sig] => Td6XOTHOCYU22oABLocdFvgsGBk=
    [openid.ns] => http://specs.openid.net/auth/2.0
    [openid.mode] => check_authentication
    [openid.op_endpoint] => https://steamcommunity.com/openid/login
    [openid.claimed_id] => https://steamcommunity.com/openid/id/76561198068485408
    [openid.identity] => https://steamcommunity.com/openid/id/76561198068485408
    [openid.return_to] => http://localhost/login-with-steam-yt/process-openId.php
    [openid.response_nonce] => 2022-05-20T02:22:02ZL9LZ+XnIhRJAYbiXMNGhaWfAF8c=
)

Constructing headers for steam's open ID endpoint

Similar to cURL, we will construct headers to hit steam's endpoint with our open id information.

$data = http_build_query($params);
//data prep
$context = stream_context_create([
    'http' => [
        'method' => 'POST',
        'header' => "Accept-language: en\r\n".
        "Content-type: application/x-www-form-urlencoded\r\n".
        'Content-Length: '.strlen($data)."\r\n",
        'content' => $data,
    ],
]);

//get the data
$result = file_get_contents('https://steamcommunity.com/openid/login', false, $context);

Checking if $result is valid

Use regular expression to check if the string contains the correct "valid" syntax, if its valid set the $steamId

if(preg_match("#is_valid\s*:\s*true#i", $result)){
    preg_match('#^https://steamcommunity.com/openid/id/([0-9]{17,25})#', $_GET['openid_claimed_id'], $matches);
    $steamID64 = is_numeric($matches[1]) ? $matches[1] : 0;
    echo 'request has been validated by open id, returning the client id (steam id) of: ' . $steamID64;    

}else{
    echo 'error: unable to validate your request';
    exit();
}

Using the steam id to get the user data

You will need a steam API key for this step. To obtain your key, visit this link.

We use a simple file_get_contents() to get the data on the user, with our API key in the URL.

$response = file_get_contents('https://api.steampowered.com/ISteamUser/GetPlayerSummaries/v0002/?key='.$steam_api_key.'&steamids='.$steamID64);
$response = json_decode($response,true);

Example return from steam API

Array
(
    [response] => Array
        (
            [players] => Array
                (
                    [0] => Array
                        (
                            [steamid] => 76561198068485408
                            [communityvisibilitystate] => 3
                            [profilestate] => 1
                            [personaname] => Exit
                            [commentpermission] => 1
                            [profileurl] => https://steamcommunity.com/profiles/76561198068485408/
                            [avatar] => https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/3c/3...
                            [avatarmedium] => https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/3c/3c...
                            [avatarfull] => https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/3c/3c2...
                            [avatarhash] => 3c2ae1c9d9e96429c2a274728b55e71c7e745a40
                            [lastlogoff] => 1652935474
                            [personastate] => 0
                            [realname] => Martin B
                            [primaryclanid] => 103582791441483516
                            [timecreated] => 1343770109
                            [personastateflags] => 0
                            [loccountrycode] => US
                            [locstatecode] => 13
                            [loccityid] => 40043
                        )

                )

        )

Since it's an array of users, we will get the relavent data from the response, and set our session variables.

$userData = $response['response']['players'][0];
$_SESSION['logged_in'] = true;
$_SESSION['userData'] = [
    'steam_id'=>$userData['steamid'],
    'name'=>$userData['personaname'],
    'avatar'=>$userData['avatarmedium'],
];

From there, we can redirect the user using a header.

$redirect_url = "dashboard.php";
header("Location: $redirect_url"); 
exit();

Finally, on the dashboard, we append getting the user data from our new session.





  
  
  
  


    
        Welcome to the dashboard,
        ' class="rounded-full w-12 h-12 mr-3"/>
        Logout

Human readable arrays in PHP

Martin B — Sat, 14 May 2022 16:00:46 GMT

When I began using external APIs, I ran into a big problem. I couldn't read my arrays. They were a bumbling mess that looked like:

array(4) { ["time"]=> array(3) { ["updated"]=> string(25) "May 14, 2022 15:45:00 UTC" ["updatedISO"]=> string(25) "2022-05-14T15:45:00+00:00" ["updateduk"]=> string(25) "May 14, 2022 at 16:45 BST" } ["disclaimer"]=> string(155) "This data was produced from the CoinDesk Bitcoin Price Index (USD). Non-USD currency data converted using hourly conversion rate from openexchangerates.org" ["chartName"]=> string(7) "Bitcoin" ["bpi"]=> array(3) { ["USD"]=> array(5) { ["code"]=> string(3) "USD" ["symbol"]=> string(5) "$" ["rate"]=> string(11) "28,763.1371" ["description"]=> string(20) "United States Dollar" ["rate_float"]=> float(28763.1371) } ["GBP"]=> array(5) { ["code"]=> string(3) "GBP" ["symbol"]=> string(7) "£" ["rate"]=> string(11) "23,451.3911" ["description"]=> string(22) "British Pound Sterling" ["rate_float"]=> float(23451.3911) } ["EUR"]=> array(5) { ["code"]=> string(3) "EUR" ["symbol"]=> string(6) "€" ["rate"]=> string(11) "27,625.2674" ["description"]=> string(4) "Euro" ["rate_float"]=> float(27625.2674) } } } Array ( [time] => Array ( [updated] => May 14, 2022 15:45:00 UTC [updatedISO] => 2022-05-14T15:45:00+00:00 [updateduk] => May 14, 2022 at 16:45 BST ) [disclaimer] => This data was produced from the CoinDesk Bitcoin Price Index (USD). Non-USD currency data converted using hourly conversion rate from openexchangerates.org [chartName] => Bitcoin [bpi] => Array ( [USD] => Array ( [code] => USD [symbol] => $ [rate] => 28,763.1371 [description] => United States Dollar [rate_float] => 28763.1371 ) [GBP] => Array ( [code] => GBP [symbol] => £ [rate] => 23,451.3911 [description] => British Pound Sterling [rate_float] => 23451.3911 ) [EUR] => Array ( [code] => EUR [symbol] => € [rate] => 27,625.2674 [description] => Euro [rate_float] => 27625.2674 ) ) )

We need it to look more like this:

Array
(
    [time] => Array
        (
            [updated] => May 14, 2022 15:54:00 UTC
            [updatedISO] => 2022-05-14T15:54:00+00:00
            [updateduk] => May 14, 2022 at 16:54 BST
        )

    [disclaimer] => This data was produced from the CoinDesk Bitcoin Price Index...
    [chartName] => Bitcoin
    [bpi] => Array
        (
            [USD] => Array
                (
                    [code] => USD
                    [symbol] => $
                    [rate] => 28,769.6520
                    [description] => United States Dollar
                    [rate_float] => 28769.652
                )
            ...
        )

)

YouTube Guide

The magic code

How to print an array

There are multiple ways to print an array. "print_r" is the official way, but var_dump will output the arr with more verbose information

However, both of these options are not human readable.

print_r($arr);
var_dump($arr);
echo ''.print_r($arr,true).'
';

Making it human readable

If we want indenations, formatting, etc; we can use the following simple line of code:

echo ''.print_r($arr,true).'
';

However, in projects, I don't want to type that mess. I put it inside of a function and call it every time I need an array printed. Since I use it so often, I have a very generic name for my function...

echo p($arr);

function p($arr){
    return ''.print_r($arr,true).'';
}

How to get a Minecraft Server's player count, MOTD, and status using Javascript

Martin B — Sat, 14 May 2022 01:06:15 GMT

Getting the status of a Minecraft server is very easy using the free MCApi.us API. All it takes is hitting the endpoint with a basic fetch statement, and then parsing the data that is returned and displaying it on your html page.

Video Tutorial

Feel free to follow along with the video tutorial. I will be using this as a guide to reference code instead of writing it fully in the video.

Getting Started

In the starter code in the video, I use a HTML + CSS page that I made off camera. I wanted to keep the tutorial short in order to show how easy it us to plug this stuff in to your existing application. Please feel free to leave feedback if you are interested in how to create this screen. It was built using tailwind CSS.

Where to download started files:

The starter files can be found in the following github repository. Just navigate over to it,

Coding Tutorial

Starter HTML


    
        
        
            play.myserver.com
            A beautiful minecraft server
            290 Players Online

Initializing the function

We are going to create a function that will accept the severIp, and serverPort as parameters. We will pass these to the API that will return back the information about the server.

function initServerData(serverIp,serverPort){ 
    // our function will take 2 parameters
    console.log(serverIp);
    console.log(serverPort);
}

initServerData("play.dawn-mc.net","25565");

Utilizing the JavaScript fetch() API

The fetch() API lets us hit an external endpoint. We are expecting a json response, so we will automatically parse our data.

We are going to be using the MCApi.us free api. It returns a json object on the status of any server you decide to hit.

function initServerData(serverIp,serverPort){
    fetch('https://mcapi.us/server/status?ip='+serverIp+'&port='+serverPort)
    .then(response => response.json())
    .then(data => console.log(data));
}

The official documentation, and support can be found on https://mcapi.us/#usage

Handling the data that we received

Let's write a function that will take in the data we receive, and output it throughout our HTML.

Although the object sends a lot more data, we will be expecting: an MOTD message, a player count, and a favicon.

This is a sample return json body:

{
    "status": "success",
    "online": true,
    "motd": "Dawn MC | Let's build a new ...",
    "motd_json": {
        "extra": [
            {
                "color": "gold",
                "text": "D"
            },
            {
                "color": "gold",
                "text": "a"
            },
            ...
        ],
        "text": ""
    },
    "favicon": "data:image/png;base64,iVBORw0KGgoAAA...",
    "error": null,
    "players": {
        "max": 100,
        "now": 9,
        "sample": [
            {
                "name": "EchoLynne",
                "id": "f1b98f4b-8c66-4d77-a53b-f8784c0607cf"
            },
            ...
        ]
    },
    "server": {
        "name": "Paper 1.18.2",
        "protocol": 758
    },
    "last_updated": "1652491121",
    "duration": "24093588"
}

As you can see, our relevant information is stored in returnData.motd, returnData.favicon, and returnData.players.now.

The cool thing is that you can get a lot more information out of this API. Such players.sample[] will return the actual individual players on the server, and the MOTD characters are literally colored in the motd_json.

Setting the HTML

function handleServerStatus(data){
    const motd = document.getElementById("motd");
    motd.innerHTML = data.motd;

    const playerCounter = document.getElementById("player-count");
    playerCounter.innerHTML = data.players.now;

    const logo = document.getElementById("server-icon");
    logo.src = data.favicon;

}

Now that we have all of our html elements selected (be sure to have the corresponding id="motd", etc. in your HTML, we can set their innerHTML to our data.

Error Handling

    function handleServerStatus(data){
        if(data.status=='error'){
            console.log(data.error);
            return false;
        }
        const motd = document.getElementById("motd");
        motd.innerHTML = data.motd;

        const playerCounter = document.getElementById("player-count");
        playerCounter.innerHTML = data.players.now;

        const logo = document.getElementById("server-icon");
        logo.src = data.favicon;
    }

Complete Script

How to create a login with Discord button in PHP

Martin B — Thu, 12 May 2022 17:30:01 GMT

Video Tutorial

Currently, this tutorial is in video form only. We are working on a companion guide on the website!

Feel free to comment on the video if you have any questions regarding the tutorial!