Tag Archives: Web Design

Gas Mileage TinyApp

Posted on by

If this keeps up, I’m going to have to put together a dedicated page for web projects. I hope it does keep up. I really love doing it…

My latest project following the FreeBSD backup script (bash), a host of system admin scripts too small to bear mentioning (bash, tcsh, perl), and the twice-built RAID crash victimized wine database (PHP, Smarty & MySQL) (in addition to the many projects no longer online), is a gas mileage tracker. It’s also written in PHP, delivered through Smarty, and backed by MySQL, but now with delicious pChart.

I originally used GoogleDocs and a GoogleForm to record the data, and I have data going back a few years. That worked well enough and did most of what I wanted it to do, but it didn’t do everything. Now that I have my own server(s) up and running again, I have the luxury of being dissatisfied.

What it Didn’t Do

  • Provide meaningful feedback after submitting the form. I want to know what was submitted immediately on the “Form Submission Successful” screen, and if applicable, how it relates to information previously submitted. That’s just good UI feedback that it’s missing.
  • Allow me to maintain and build upon my scripting/database chops. Working with GoogleDocs is easy, fairly extensible, and has the benefit of having a preexisting world class infrastructure (and all that entails) and environment in which to work. However, I’m a bit of a maverick in these things, and for my own projects I want things set up the way I want them. Their infrastructure and environment doesn’t allow me to build on the skills I want to build on. I have my own environment. I want to take advantage of it.
  • Allow me to maintain and build upon my UI design chops. I’ve always loved the UI design aspect of building web apps. There’s a few things you can do with Google, but I felt too constrained by their system, and wanted, again, things the way I wanted them.

It wasn’t all bad, though. Setting it up in GoogleDocs did effectively (if not intentionally) serve as a sort of rough draft for rebuilding it on my own server.

What it Did Do

  • Gave me a firm sense of what I wanted, and what I didn’t want, if not a solid workflow to follow.
  • Gave me a good sense of the basic information I wanted to collect, which was then easy to translate to MySQL tables.
  • The visualizations in the form of charts and graphs were good enough that I decided I couldn’t do without them, which gave me the desire to research PHP graphing/charting libraries. I settled on pChart.

Now, I have a small web app that lets me…

  • Track the gas mileage I’m getting for my car and how many miles I’m getting per tank.
  • Track how the price of gas is changing. Always up, but still…
  • Track how much I’m spending per mile on gas.
  • Track how often I fill the tank.
  • Keep tabs on how often I’ve changed the oil (I change it myself… a pox on paying someone else to do it), and how long until I need to change it again.

Soon, it will let me…

  • Track how many miles I drive over time, per week, month, year, etc.
  • Track how long between major service visits I don’t care to do (tires, brakes, etc.)
  • Implement multiple vehicles in the hopes that I can get my wife on board and using it.
  • Authenticate access so I don’t have to worry about the data being mangled by miscreants and malcontents. Obfuscation and low-profile domains will only work for so long (stay away, Noah! :) )…
  • Better UI flow… it’s good enough for me, but it’s rough. It’s fine on the desktop, but I need to clean it up so it works on the mobile platforms better.

Here are the charts I’m generating. I know, the gas mileage isn’t that hot. But the payments are $0, so there’s that.





Viva la Vino!

Posted on by

Over the weekend (and one of the reasons I didn’t get to post about Saturday’s ride until today) I rolled a quick wine database app for my wife and I. I’d been toying with the idea in the *very* back of my mind for a little while, and when Jami said “That would be really cool!” Saturday night, I understood how I would spend my Sunday.

It’s sad, really, how much PHP I’d forgotten. I used it about 10 years ago to write a quick and dirty rough draft for a mod_perl driven LAN party organizing site that helped us, get this, organize LAN parties. The people involved in those awesome times were spread between Lawrence, KS and Kansas City, and we wanted an online RSVP system for our weekend frag-fests. Before it fizzled out due to people moving away, moving on, and generally growing out of it, it was a very nice community blog with event organization as it’s core. Hewn from scratch, it was also a great vehicle of personal growth in all things web design for yours truly.

The rough draft for that site was the last time I’d used PHP. It’s amazing how much one forgets. In building this little ditty, I had to relearn such language specific basics as assignments and conditionals, much less deeply nested hashes and objects (all arrays in PHP are, apparently, associative – who knew?). Most of the concepts are fresh from my work (at work) with Powershell, but the syntax, naturally, differs.

The engine, if I can be so bold, is still rough. In fact, it’s a tangled mess of burnt spaghetti code sticking to the bottom of the hard drive that doesn’t deserve the name “code”, but it works.

Our requirements are pretty simple:

  1. Must work easily in mobile browser for updating while we’re out with nothing but our smart phones.
  2. Must have rudimentary rating system so we know which wines we’ve liked, and which we haven’t.
  3. Wines must each be sufficiently described so we know what they are:
    • Vintage (year)
    • Varietal(s) (grapes)
    • Winery (producer)
    • Region (geographic location of winery)
    • My Wife’s Opinion
    • My Opinion
    • Comments (general notes to jog our memories)
  4. Must be able to search on a variety of fields seamlessly and simply.

And that’s pretty much it. Everything else is gravy.

While it’s fully functioning, and in working order now, like I said, it’s a hideous ugly mess behind the scenes. From here, I want to clean it up, separate logic from presentation as much as feasible, utilize more fully objects and classes, incorporate more best practices, and generally do what I can with what it is to learn as much as I can.

It’s really been a lot of fun!

This is the search form. It’s the header, basically, and appears at the top of the screen no matter what. Very simple.

This is the form for adding new wines to the database, available via the “Add” button at the top of every page. Again, very simple.

This is the form for updating wines that already exist in the database. I just call the add form code with the right values to populate the form. Code reuse is a beautiful thing.

This is the results when you search for something. I like the pretty. You gots yer yellers, yer reds, yer sparkleys, and yer pinks. Sum’pin’ for everyone!