Adding a basic search feature (repost)

(This is actually a repost since I made an mistake before. Whoops.)

The last three days were about considering and mastering the search feature for Starfleet’s Path to 2265. I write this blog post whilst I ponder ways to made the search feature more powerful and intuitive.

As it currently stands, it is a basic search function. When a viewer submits a search query, and SQL query is searches a database and returns an array of results. An if statement checks to see if there are any results. If there aren’t results present, a ‘no results’ message is echoed. If there are results present, the code proceeds to a while loop that iterates until there are no more results to echo out.

In pseudocode, the operation needed to make a search currently looks like this:

  1. Connect to MySQL Server
  2. Select MySQL database
  3. Create variable for the query string received from the search request
  4. Create variable for the SQL SELECT query that searches for matches within two fields of a database table.
  5. Create variable to store the raw results from the running the SELECT query, and handle possible MySQL errors
  6. If number of raw results is more than zero:
    • While able to print out raw results:
      1. Echo a tile containing the data for the result (includes a hyperlink, page name, category, description, and an optional image)
  1. Else:
    • Echo a tile containing a ‘no results’ message

FYI, a “tile” is the CSS class name I use for the layout element that contains a result or message.

Following that procedure, you can generate results like this…

testing_desktop_20170905

…from a search box like that:

I have clearly broken the statement I made on my last post about this project saying that I will not be doing any more serious non-styling code! But a search feature is something I should have had from the get-go. There are refinements that ideally need to be made before the website goes onto the internetz; a more advanced search algorithm that can intelligently display relevant results instead of echoing the results in the order they are stored in the database, a more space-efficient results page with filters, and compliant code for when I switch to PHP7 which also requires I use mysqli_* functions instead of just mysql_* or PHP Data Objects (PDO).

Now. Before I end this blog post, below is an example of an implementation of that pseudocode that should work with little modification. Starfleet’s Path to 2265 uses code that is very similar currently. It might be basic, but it works for now. I am more focused on other parts of the website. So if I run behind schedule, I at least have this to fall back on.

Example PHP code:

phpSearch

Example HTML code of a search box that works out of the box with that PHP code:

htmlSearch

Enjoy!

Advertisements

Ironing out “Starfleet’s Path to 2265”

After an interesting birthday on the 27th where a bunch of friends and I had a debate about the merits and dangers of artificial intelligence, it is time to get back on with life. My Star Trek-themed website is nearing the point where it is polished enough to go on the interwebz. Hopefully, it should be online around the middle of next month once I have purchased the domain name I need.

I have made some considerable chances since my last post about the website (Library, Rain & ul/li menus). I rebuild the code and styling of the website in a complete mobile-first approach, implemented the ul/li menu, and generally added more content ready for launch. For this week, I am currently working on refining the style of the website. As it currently stands:

So far, creating content has been thought-provoking and fun to do! Whilst it may take years to complete everything I want to do, the motivation to do this has allowed me to create a fair bit of launch material ready for next month. Here are some examples:

(Please ignore any spelling, grammar or word flow issues. Everything will be proof read eventually before launch.)

Developing the design to suit the content has been interesting too. As shown by the example of a ship report above (and below in far more detail), I have been developing these ‘boxes’ for different types of content to give the page an LCARS-like (the interface of TNG-era Starfleet computer terminals) feel. I avoided completely copying LCARS due to the fact that this website is based around pre-TOS and TOS content (the similarities are just a ‘tip off the hat’). These boxes do collapse on mobiles and tablets in order to free up space for words.

So that’s about it for this update! Most of the changes from here on will be refinements and additions to the CSS stylesheets and adding more content. One thing to be revised is the colour scheme – the blue seems too intense on some displays. Adding more HTML (except when headings and paragraphs are needed) and PHP code is unlikely.

The PlayStation Controller Fever

Some of them may be a bit filthy right now, but they are the beginning of a collection to satisfy my current obsession.

Controllers

So I have to hand it to Sony. They have developed and matured one hell of a games controller. It is my favourite line of controllers developed to date. I have used one of the latest iterations of the design, an original DualShock 4, for almost a year now and I have loved it. But after digging up an old DualShock 2, I thought that it might be interesting to use it for modern gaming and see how well it has aged. I did so, and then an obsession came…

The first thing I should explain is that I use all these on my PC rather than a PlayStation. I personally dislike console gaming, but find that a controller is optimal for some situations compared to a keyboard and mouse. So far, using the DualShock 4 has been a breeze. Using a software called DS4Windows, I simply pair the controller with my PC via Bluetooth. However, things can be trickier with the older SIXAXIS/DualShock 3 controllers without a USB cable, and all the previous wired controllers.

Actually connecting all pre-PlayStation 3 controllers is straight forward. You just need an adapter like the one below (which is similar to my one that I bought off eBay for £1.48 + free economy postage).

Adapter

However, since Windows registers these controllers as a DirectInput (a legacy API that has barely been modified since DirectX 8 from 2001/2002) device, most modern games do not seemlessly support them. Modern PC gaming with controllers is built around XInput devices such as the XBOX 360 controller. So, to get these older controllers working, I use TocaEdit’s Xbox 360 Controller Emulator (link) to make them appear as XInput devices. So far, it has worked well for Battlefield 4. Other games I have not tried yet, since I’ve had little time for gaming right now (which is why I have not posted anything on this blog recently).

Now, for SIXAXIS or DualShock 3 controllers. Since my current SIXAXIS is in bad shape, I have a replacement on the way. Also, I have barely used that controller on my PC, so I can only detail the approach I’ll be taking. My plan is to use the ScpToolkit (link) by Nefarius to install a custom driver on Windows for an external Bluetooth adapter I have coming for dedicated use with SixAxis and DualShock 3 controllers.

The fleet
I currently have the six pictured controllers. I have a three more on the way right now, and I have more to get in the future before I have one of each EU-marketted controllers released by Sony.

  1. SCPH-1080: PlayStation Controller – pictured top-left
  2. SCPH-1180: PlayStation Dual Analog Controller – awaiting arrival
  3. SCPH-1200: PlayStation DualShock Controller – pictured bottom-left
  4. SCPH-110: PSone DualShock Controller – pictured top-middle
  5. SCPH-10010: PlayStation 2 DualShock 2 Controller – pictured bottom-middle, needs to be replaced with one in better condition next month
  6. CECHZC1: PlayStation 3 SIXAXIS Controller – pictured top-right, awaiting arrival of one in better condition
  7. CECHZC2: PlayStation 3 DualShock 3 Controller – awaiting arrival
  8. CUH-ZCT1: PlayStation 4 DualShock 4 Controller – pictured bottom-right
  9. CUH-ZCT2: PlayStation 4 DualShock 4 V2 Controller – to be bought next month

It’s fun to get obsessed with collecting things…

Library, Rain & ul/li menus

Wow. It is really wet today.

I love the rain, yet even I resorted to running into the library for cover today. Inside the PC lab area, the rain is giving its full force unto the windows. Have a look:

 

Note: it was louder in person.

It is actually being a rather nice distraction here as I have woes with redesigning the menu bar for my upcoming Star Trek-themed fan site. Although there was nothing wrong with the menu before, I am currently rebuilding it on an offline test page using lists instead of modified anchors. There are pros and cons to this approach of course, with the main pro being it will naturally suit a multi-level list in the rather likely event I implement one in the future.

Here’s an interesting read on the subject:
https://css-tricks.com/navigation-in-lists-to-be-or-not-to-be/

The current issue is not being able to get the <ul> to float right. Observe the links being rendered over the logo that is floating left:
Capture

Whether you are for or against these lists, please note that currently I am only exploring my options.

Saturday was great!

Llywn-on reservoir. It is the largest of the three reservoirs in the Taff Fawr valley, Brecon Beacons National Park.

I have now revisited all three of them this year with my parents. The last time I went to these places was about a decade ago, and whilst my life has changed considerably since then, these places are as nice as I remember them. Each are large volumes of flat and relatively calm water with a ‘rangingly’ different surrounding.

Some phone photos of Llwyn-on Reservoir:

This one had a lot of forrestation around it. Whereas the first one I went to this year, the Beacons Reservoir (photos below), was mostly walled with a few interesting structures around it, and the Loops & Links path. The second one I do not have photos of, but it was similar to Llwyn-on.

Beacons Reservoir:

So if you’re in town and want a nice place to a spend a few hours or so with ranging scenes, I recommend these three reservoirs and the area surrounding them!

Why “Mobile-First” website development is actually a good thing

Upon examining my last three websites project, I have noticed a trend in the way I develop websites.

I usually design my websites desktop first/mobile later. Which has been fine until now since these offline projects were just code practice for me, and they were database-style websites that would be ill-suited for mobiles. But now, as I prepare to launch two websites that will be on the internet for the public’s viewing, I am starting to see why the “mobile-first” philosophy is actually a good one, and why modern developers should consider adhering to it.

In the last of the three older projects (which was about Aircraft Carriers), I did start redesigning the website to be content-efficient on mobile displays using CSS media queries, but the transition was troubled. I found my myself ‘hacking’ things to make things appear correctly, rewriting entire CSS stylesheets, and adding DIV containers to manipulate groups of elements better.  On my first new websites, I have opted to start transitioning to a mobile-first development scheme (I’ll explain more about why I finally decided to adopt this approach below).

Things have worked out far better this time around. Probably the best thing about this is that the transition from mobile to desktop is an expansion, whereas the transition to desktop to mobile is a contraction. Making an element contract from an already well-calculated specification can be problematic, hence some cases of rewriting the entire CSS so that everything acts uniformly. Manipulating elements designed to be small into larger elements from my experience is far easier.

The new websites look far better than all my previous efforts. But the change was incremental. The first new website, a Star Trek fan site, was only designed at the beginning with mobile devices in mind. There is a high degree of code commonality with my aircraft carrier website, except for the way I handle content efficiency. You might notice from the screenshots of my website there are these red tile objects. These are what display hyperlinks and other data that require morphing when viewed on smaller screens. Using media queries; their width, height, padding, font-size (in em instead of pixels) and optional images’ size are modified. The rest of the website’s content, such as headings and paragraphs, only have their font-size modified. The header’s size stays the same, although the standard menu gets switched into a mobile “hamburger” menu. The website is designed to be displayed in three fixed size brackets; desktop (> 1024px), tablet (< 1024px && > 768px) and mobile (< 768px). This website is due for launch before the years’ end. I will likely make a future post explaining this project.

 

(Please note that for the mobile website, a viewport meta tag is present to ensure that a phone’s web browser displays correctly and eliminates the view of that large blue margins. That screenshot is from a desktop browser.)

My second website is eventually going to serve as my personal portfolio showcase. That was written from the ground up to be a mobile size. The default CSS code is for mobile styling, and then media queries modify it to desktop styling when needed. There are also three size brackets, however the during the mobile bracket, the wrapper that usually keeps the elements in the center of the screen is not fixed and the elements can scale to fit from 768px to 480px (before, the mobile bracket offered a fixed wrapper size of 512px). The tile styling system I used previously is currently omitted from the design as I am working on a better way of flexible size data representation. The design is still being built, so no screenshots yet.

So, why this change all of a sudden? Well, the fact is that more internet users are using mobiles these days – I personally have been using my phone to browse my favourite Star Trek websites more than ever. And the fact is, you really should not give your readers a negative point about the website’s design. I have seem some reports and statements that have talked about the woes in the eyes of the consumers when they use their phone to browse a non-mobile optimised website. People are quick to form opinions based on first impressions. And if that first impression is that the website has a poorly-optimised mobile site, then it is possible that no amount of good content will remedy the situation (it is funny, yet concerning how many things you can apply that logic to as well…). But anyway, I aim to give the best impressions I can with my first proper public websites!