Web Development Category | Jacob Emerick's Blog

Beginner Web Developer Mistakes

With my introduction into web development coming from a static html/css direction, I've had to overcome several bad coding habits over the years. Most of these started with poor assumptions about the way websites worked. It took a crash course in php programming and a few hard bumps before realizing how wrong my first websites really were. Here are a few of those assumptions and how I built on them to increase my programming skills.

Each URL relates to a unique file on a web server

If you're only used to working with static html files than this assumption is largely true. Every different URL that a user visits on a web page is in reference to a different file on the server. Without any type of scripting, the file is merely a chunck of html and can only be changed by a webmaster physically manipulating the document. My first dynamic website used php include commands to pull a fixed header and footer for all of my pages, allowing me to make global site changes from a single file. When I finally started to learn more about php variables and url manipulation, I kicked myself for the extra time and work I spent creating larger sites. There are a number of techniques that you can use to have a single script output multiple pages on a site, a concept I discussed with...

• Tags:
• php
• oop
• mvc

Revisiting the Database Class

Several months ago I wrote a blog post describing how to create a database class that would wrap the native php mysqli connection. You can read that post here. Since that post was written I've learned a lot about proper php classes and realized that I made several mistakes in that blog post that I'd like to revisit.

Singleton

The database class that I wrote constructs a new read/write connection whenever it is instantiated. However, there is nothing unique about this connection - it remains the same no matter how many different instances you have of this class. There should be only one instance of this class in this case. If you have several different connections (say, a different user for each of your databases or schemas) then you'd have to look at passing connection information into the class through a factory class, but this case requires a singleton.

A singleton class is fairly simple to make. By making the __construct method private and maintaining a single instance saved within the class, you guarantee that there will be only one instance of the class. It can be very helpful to restrict some classes in a singleton manner. For this case we'll avoid creating multiple identical mysqli connections...

• Tags:
• php
• oop
• sql

Intro to SQL Part D

For the last post in this short series on SQL I wanted to explain some more in-depth usage. A technique that I wish I would have started using in my early websites is a centralized script to handle all of my database calls. PHP does have some great functions built in to connect, read, and write using SQL statements (check out mysqli), but it's easy to start copying the same eight to ten lines of code every time you want a piece of data from your tables. A better approach is to handle the queries with a centralized class.

Before anything can be read or written to a table with a SQL statement, you need to create a connection. Your website will be signing as a user with specific privileges. A good technique is to make two users, one that can read and one that can read and write. By using the former user as much as possible and taking extra care with the latter one, you will minimize the possibility of hackers uploading malicious information or dropping whole tables.

Once a connection is made you can start having fun with the database class, customizing the methods as much as necessary to integrate it easily with your site. I prefer returning my information as arrays of objects or single objects, so I have two separate methods in my class.

• Tags:
• php
• oop
• sql

Intro to SQL Part C

While the last two posts focused heavily on theory and fundamentals of SQL it's time to start on the actual usage. There's a ton of good tutorials out there that skip right to the code, but as a young developer, I wasn't convinced that SQL was a worthwhile tool until I was forced to use it. I wanted to spend a good amount of time discussing the basics before jumping into some examples. If you're looking for more advanced and specific uses, I'd highly recommend checking out w3schools SQL tutorials.

As I introduced in my last post, an SQL table is a collection of unique rows. There are two primary things that you do with the data in a table - read and write. With the proper syntax, a hacker can write to your database, injecting into or deleting your data, so it's important to restrict the front end privileges and validate. That's a subject for a later post, though. Let's look at how you can read a table.

Reading from a table is also known as a 'select' statement, since you're selecting entire rows of information. You can restrict how many rows you select, pulling single rows or entire tables, and you can also restrict what fields you select out of the rows. A select statement has several important...

• Tags:
• sql
• introduction

Intro to SQL Part B

In my last post, I introduced some of the basic ideas of data storage and how I came to realize that SQL would be a great solution to my content handling problems. Now I'd like to walk through some of the more advanced concepts and start going through some basic uses. There's plenty of great tutorials out there if you'd like to take SQL to the next level (I'd recommend checking out w3schools), but I hope these posts make a great foundation for a starting developer.

An Excel workbook is a good way to picture a SQL database. A database is a collection of tables (one table per tab), with each table showing a different portion of the total content. Each table should be unique in most cases to avoid duplicating your data. The individual tables in the database have some constraints. Rows must have the same number of columns and identical column types. It's also a good idea to keep the columns simple. If you're saving numbers, then the column should be set to save numbers.

The last paragraph may be hard to understand at first, so here's another example. This blog is being saved in a SQL database. One table is saving all of the posts, with each row in the table relating...

• Tags:
• sql
• introduction

Intro to SQL Part A

I like to think of myself as a practical web developer. With no true formal training, most of what I use to make my web sites is self-taught. Instead of trying to apply what I learned in a classroom into an online project, I went out and learned what I needed to get a project done. This allowed me to enter the world of web programming slowly, gradually picking up additional techniques and languages as my web sites became more advanced. There has been more than once that this approach has made my life difficult, though, and SQL is one of the more blatant examples.

After I learned xHTML and CSS, I thought that I was set with web development. I could design and launch fully compliant sites, updating them as necessary with new content. Once a few months passed, though, I started to realize that there was a big difference between markup and content, and that the content (data) of a web site should be handled separately from the markup (html tags). By keeping my changing content hard-coded on the page, I was losing my old data and funneling all of the updates through a single person, myself, who knew how to write markup.

I started looking at alternate methods of saving my dynamic content over the next year, using both xml and text files to save the data. With a static...

• Tags:
• sql
• introduction

Tips on Personal Sites

Over the last six months or so, I've found myself spending a large amount of time working on personal websites. What is a personal site? Well, as a web developer I work on three broad categories of websites: fulltime-job websites that have to work within branding and technological constraints, freelance projects with some flexibility on design and implementation, and personal projects that I don't get paid for. They can range from blogs to resources, and there are a couple of things I'd like to keep in mind while I work on them.

There's still a client involved

And it's me! The website is a representation of me as opposed to a company or project. This is nice in some regards, as I have complete control over the design and implementation of the site, but can also lead to easier procrastination and more fickle design changes. I try to treat these types of projects like a paying one, setting up deadlines and some restrictions on how long to spend tinkering with the design and layout. While it's nice to launch the perfect website, sometimes its better just to tinker with it after its online.

Balance the promotion

No matter what kind of website I end up building, it's still a representation of me for the entire world to see. Depending on the site,...

• Tags:
• my site

MVC CSS Stylesheets

While working on redoing my website using a custom model-view-controller framework I decided that it was a good time to do some extra cleanup. After all, cleaning up the backend only changes the content portion of the site. There's much more to websites - styles, behaviors, cache control - then the content. In the interest of cleaning up my website I decided to take my MVC framework to the next level and use it to create my stylesheets and Javascript in real-time.

The primary benefit of MVC frameworks is to simplify code logic and remove duplicate code. With all user requests being transferred through the same routes and controllers, it's easy to whip out extra html pages or make site-wide changes by editing a few lines. Common SQL functions, AJAX calls, and classes can be used across different pages and sites easily without duplication.

There's a lot of duplicated code in my assets. I use Erik Meyer's reset stylesheet, a global set of style rules, jQuery, similar lightboxes, etc across my different subdomains. I could include each asset as a separate file, but that setup would create an increasingly long list of http requests, which is bad for website optimization. My adventure map, for example, would need at least 5 Javascript assets: Google maps settings, jQuery,...

• Tags:
• my site
• oop
• css

Using Headers for Caching

One of my main goals while redoing my website is to optimize my content, both on the frontend and backend. The frontend is something that I've always considered to be the most important in terms of a fast user experience - I'm not crunching enough data on the backend to worry about long processing delays for users. However, depending on the connection, I've noticed delays upwards of five seconds in between pages, which is completely unacceptable.

There's a few things that a web developer can do to speed up the frontend. Decreasing the number and lowering the size of the unique elements are two of the most obvious. If the user only has to download two small stylesheets instead of five, your site will appear faster. What I wanted to do was take this a step further; repeat visitors will not have to download any new stylesheets, scripts, or images. The only http request will be the xHTML content. This can be handled by using the built in caching components of the internet.

There are several different ways that website can cache information for users to view it easily, including on the user's computer or on a proxy server. That doesn't matter too much, as long as the header information passed between the user and the web server understands that there is a cached version...

• Tags:
• my site
• optimization
• http headers

Website Overhaul

It may be no surprise to any of my long-term visitors, but I've decided to perform a deep overhaul of my website. Based partly on my recent introduction to model-view-control frameworks and partly on research into web caching and optimization, I've spent a good chunk of time analyzing my current and future website functions in the hopes of streamlining the backend code and optimizing the frontend. There are several goals that I have in mind for this overhaul, most of which will stretch my current programming skills.

Model-View-Controller Setup

The idea behind this sort of programming is breaking everything up into separate, reusable objects. All requests to the website are directed to a primary router, which interprets the request and pulls a controller to handle the page. A controller is a set of instructions based on the page type (example: home page, blog post pages, etc) that sets variables for the final page. The controller may talk to a model, which is the 'logic' for the site (usually a database object), and pull additional content for the page. Finally, views are included and passed variables to display a unique page per URL.

The benefits for this system are numerous - once the system is setup, that is. One database model can handle all SQL commands...

• Tags:
• my site
• oop
• mvc