A Beautiful Lie | Perpetual Education: 009

You think you're going crazy, but you're not. You're not alone

This post is dedicated to a project that we recently went through that provided a lot of challenges, questions, learning, and of course.. growth.

At this point we’ve learned ways to effectively use PHP and create a project that could take user input and create a card for that information. A simple explanation of this is having a data file that is looped through to create most items on the webpage, and when the user puts information into this page it gets added to this data which is already being looped through. For deleting things, we have to search for that item and remove it from the data file. Does that make sense? Maybe? Either way I’ll be going in depth and explaining more about it in detail. PLUS I made it about Street Fighter so that’s cool 😎. There will be a lot of images as they capture the site in this moment, and it may develop into something completely different in due time.

So if you’ve read some of my other post, I gave a pretty simple explanation of the benefits of using PHP. If you didn’t.. nothing to fear! So HTML is the basic text writing for websites, creates boxes that has things for people to see. Now it would be annoying if I needed to make an individual page for every little things, like an item on Walmart’s page… you know how many things are sold at Walmart? Cause I don’t. Making that many things would be crazy. PHP lets us use one page of structure for every single items. I wouldn’t have to even check anything as long as the data file is correctly made. Ah data files…

We originally started organizing our data in PHP format but we quickly moved over to JSON. Which is a standard way for containing and transferring data in the industry. JSON is —

• Easy to read and write.

• It is a lightweight text-based interchange format.

• JSON is language independent.

This is how my data structure was organized, we are going to be looking at one of my 8 character’s data. Chun-Li the worlds first and most powerful woman fighter.

So all this gibberish inside the { } is key value pairs for this object, or the character in this case. The dark blue parameters, such as “name“ are keys and the green parameters that follow it are the value for that key. All this together and suddenly you have a bunch of information to present that gives this character’s page some life.

Okay, but before we get to this point we need to showcase all our characters to link to their dedicated page. In this moment I create a page that gathers my character’s data and loops through it to get their name and image. After it gets all those I styled it to be organized into a grid of those cards.

We have a list : <ul>, inside that is list items: <li>. This then loops through all the fighters as a fighter and takes each individual key to display its value. $fighter[‘name‘]… displays the name… obviously! 👍🏼. Then it checks if a portrait exist for that key with isset( ), a php function that does that automatically. Each of these cards is a link to a detail page: ‘?page=detail&id= $fighter[‘id‘]’. The way the programming understands this is as a page ‘detail’ in our files that then goes through the selected characters and displays all of that.

Before I move on to talk about the detail page, I do want to bring up the list up at the top of the present characters.

With PHP I can create a variable that checks what is selected. Based on that selection I made It so that it filters for the option selected. In this example, Necalli and Zangief are grappler characters and appear selectable while the others get blacked out. Pretty cool feature. 😉

Alright so detail page gets little crazy… I made my characters very alive and gave them a lot of data to represent them. Their style, some moves, costumes, a voice quote and even their enemies.

I think it developed very nicely! If I do say so myself. I do eventually want to make it a little more interactive but everything is present and displayed with some style. Speaking of interactive.. villains deserve to be taken out…

---

When I was creating this project there were a lot of ups and downs. A lot of data, functions, and elements to piece together. Everything working together to make the webpage look and work. There’s some tricky hills to get over but I was willing to put myself in a position that would challenge me, by creating new scenarios that may or may not work.

This blog post is dedicated to going through all the data and creating a routing system to display each page accordingly.

Not going to go too deep into the explanations of the forms in this post necessarily but it works… for the most part. Asks for certain information and adds it along to the main list display. There may be some bugs that still appear but you’re more than free to mess around with it.

I put a lot of data.. so I have to request for a lot of data which is an issue I ran into, how do I display all these questions? Took some research and exploring to find something I liked that is simple to understand and presents the user with options. I will be exploring with more detail about how this worked in a future post.. or when I complete it 😂. First thing on my to do list when I complete some other PE projects.

Here is the live site so you could see it for yourself —> LINK

---

This post’s title and intro is brought to you from Westworld’s latest season. I’ve always enjoy this sci-fi show as it always brings up the idea of questioning one’s reality and understand what it means to be a person. What if society has planned your future for you, and you just live in a constant loop. I appreciate the existentialism that comes with this show in particular but it is present in other shows as well. It really brings me happiness to be brought to a thought provoking state.

If you can't tell the difference, does it matter?

I don’t know.

Catch ya’ll later!✌🏼