Dale M. Picou, Jr.

Web Development Applications for PHP

Introduction

There are many applications that can be used for PHP web development. One of the great things about PHP, like HTML, is a developer could just use a plain text editor. There is by no means any requirement to purchase any special software. However, like anything else, there are applications to make life easier. These are the applications I use and the features I find the most valuable.

Sketch: FrontEnd Design

Sketch is a wonderful front end design tool. It is easy to learn and has grown greatly in popularity. Many have moved to this application as an alternative to Adobe Illustrator, I am not any different. I have used Sketch to do everything from build logos to draw complicated network diagrams.

One of the early features I found to be very valuable is the ‘Copy CSS Attributes’ option. Here the user can draw an element then change the color, corner roundness, shadows, border size, etc. Then select the ‘Copy CSS Attributes’ and it will out this to CSS code for your HTML element.

Another feature I found useful is exporting. I don’t do it so often now as CSS styling has taken over, but when I did create sites that were more layout graphic heavy, the ability to creates slices and export based on those slices came in very handy. Additionally, if there are multiple slices, a user could export them all at once and whatever the slice defined name is, will also be the file name.

This just scratches the surface of Sketch. New features are being added to Sketch every year. Pricing for individuals is $100 which includes updates for a year. After the first year, an individual can pay $79/year for upgrades or keep the current version without any additional cost. I must restate there is no requirement to pay yearly. Visit the Sketch web site for more information.

Panic's Coda 2: Frontend Development

After designing the layout in Sketch, Panic’s Coda 2 is my next stop. Coda 2 is a great WYSIWYG editor built for Mac only. Using Coda 2 enables the developer to translate interfaces to HTML and CSS. The live preview helps to visualize changes as they are occurring. Coda 2 does support PHP as well as javascript, CSS, and HTML. I did use Coda 2 for PHP until the discovery of PHPStorm; more on that later.

When editing CSS and typing an attribute, the developer has the option to open a tooltip GUI window. This allows the developer to visually select a border, box shadow, or color. This by fair is the most useful feature I find when tweaking designs in HTML and CSS.

In addition, Coda 2 includes a built in terminal for accessing your development server’s command line directly from the GUI. There is also a feature to access your application’s database without leaving the application. I do see the potential advantage to using these features as an all in one solution, but with my workflow, I prefer the other applications which contain additional advanced features.

Coda 2 is a bit long in the tooth, but while writing, I found Panic has released Nova this year. Nova is essentially Coda 3 and personally I have been waiting some time for its release. After reviewing Nova, I may switch over in which this article will be updated.

The good news is Coda 2 remains available even though Nova has been released. Coda 2 is currently available for the flat fee of $99. Nova is also available for $99. However, there is an option to purchase updates to Nova for $49 a year similar to Sketch. If coming from Coda 2, the upgrade price to Nova is $79.

JetBrains' PHPStorm: Backend Development and Design

JetBrains’ PHPStorm is by far the best PHP IDE on Mac. Yes, this is one of the few apps on this list that requires a reoccurring fee. Yet, I believe with the ‘all products pack,’ it is a great value if you are interested in programming.

I use PHPStorm when developing the backend PHP code. After converting the UI designs to HTML and CSS in Coda 2, those files are used as templates for the application. The majority of my time is spent in PHPStorm developing the back end along with maintaining the application. PHPStorm includes completion for CSS, JavaScript, HTML, and PHP. Rarely once a project reaches this state will I go back to Coda 2.

There are many features included in this IDE, I find new ones every month which a developer could utilize to make development faster. The features I find the most valuable are: deployment, Git Integration, and custom function variable mapping.

The PHPStorm deployment is a great feature. With this feature, the developer can define multiple deployment servers (for example production and dev). Set the development server to automatic, and every time a file is changed, the file gets uploaded automatically. In addition, the availability to map different paths or exclude paths is also very useful.

Ever find the development server and local files get out of sync? The Deployment feature has another function that allows you to sync the entire project based on folder mappings and excluded paths. PHPStorm will compare the remote server files with the local files then show which files have been updated or missing on either location. Then choose the action to be preformed to each out-of-sync file: copy to local, copy to server, or delete. Click a single button, and all the actions are completed.

PHPStorm sports great Git Integration. In fact, PHPStorm is what finally got me using Git. I used both GitHub and Gitlab in which both work great. You can preform the normal add, commits, pulls, and pushes. When committing, there is a dialog which allows you to elect files, see a diff of any file, and of course add comments. All the commits are cached locally until you complete a push. Additional git tasks available is the ability to create/delete branches, tags, and stashing.

Custom variable mapping is wonderful. When creating developing custom classes or functions, PHPStorm will read the variables required for those functions/class. The functions/classes will autocomplete when typing. Also appearing will be the variable names for each input variable. This saves time as I don’t think anyone ever remembers the order of all the variables being passed to a custom class or function. Bonus: This works as well with built in functions. The developer is able to choose which PHP version to validate against.

Pricing for PHPStorm as stated earlier is reoccurring monthly or annually: $8.90/mo. or $89/yr. for the first year. After the first year, the price drops to $71 and then to $53 for the 3rd year onward. However, JetBrains has many other applications a developer may find useful. I would personally recommend checking these applications out before purchasing the single app. The All Products Pack contains all their development applications which again can be purchased either monthly or annually: $24.90/mo. or $249 for the first year. Like with the single application, the annual cost drops after the first year to $199 and then the to $149 for the 3rd year onward.

MySQL Workbench: Database Design and Development

MySQL Workbench is going to be my most valuable free tool! This database management tool is my primary tool for designing, deploying, editing, and connecting to databases. It works with both MySQL and MariaDB. I haven’t found a single paid tool that comes close to this application.

In the beginning, phpMyAdmin was my go to administration tool. This tool however has a major downside, it requires a web server running php. Personally, I want my web server running only my applications. Also I don’t want my database server running a web server just for the security implications alone. When I found MySQL Workbench, that was all it took. I never again used phpMyAdmin.

MySQL Workbench will do everything phpMyAdmin will do and then some. The most valuable feature has to be enhanced entity-relationship (EER) diagrams. This allows the database designer to visually build a database. When starting a new project, a blank EER diagram is the place to start. Just create tables and build relationships visually. From the EER diagram, with a few clicks you can export everything to SQL. Copy and paste this into a MySQL server, and now the database is live.

Connecting to a database server with MySQL Workbench is also great. A developer can of course save all the connection information, this allows connection with no prompts. From here, one can delete and modify any database / table (as long as the username has access of course).

MySQL Workbench is also able to modify configuration options and administer users with privilege management. No need to memorize commands, use the GUI to assign the privileges. I really enjoy being able to see the start-up logs and all the options available in the Options file. It is a great way to explore the possibilities and expand ones knowledge.

MySQL Workbench is also able to modify configuration options and administer users with privilege management. No need to memorize commands, use the GUI to assign the privileges you want. I really enjoy being able to see the start-up logs and all the options available in the Options file. It is a great way to explore the possibilities and learn.

So are there any bad sides? Yes. I have found the application throughout its life to be very buggy on Mac and Windows. Sometimes it won’t close all the way, crashes, or won’t open at all until patched. It has gotten much better in recent years but little things are still there. Yet with the amount of time this application saves, I am able to look over those hiccups.

If you are using phpMyAdmin, I would suggest giving MySQL Workbench a try! It is free forever….for now.

Conclusion

In conclusion, everyone has their own methods and tools they prefer. These have been the choices for my workflow based on 21+ years of experience. I find the tools work well and are all reasonably priced. For example, here is the break down over 5 years:

Application Year 1 Year 2 Year 3 Year 4 Year 5 Total
Sketch $99 $79 $79 $79 $79 $415
Coda 2 $99 $0 $0 $0 $0 $99
PHPStorm (All Products) $249 $199 $149 $149 $149 $895
MySQL Workbench $0 $0 $0 $0 $0 $0

Over a 5 year period, that adds up to a grand total of $1,409 or $24/month. For comparison, Adobe Creative Cloud paid annually over a 5 year period would cost $3,000 or $50/month.

Hope this article was helpful, and if so, feel free to let me know. Also, any suggestions for future articles are always welcome.

Disclaimer: The contents of this article are of my opinion and based on my experience. Before applying any of the concepts or suggestions in this article, complete your own independent research and testing. By reading this article, the reader agrees that Dale M. Picou, Jr. shall not be held liable for any negative impact when applying these tutorials, concepts, and/or suggestions.