Tag Archive | PHP

Dollar IDE Screenshots

I realised today that I never got round to posting any screenshots of Dollar IDE, the PHP Integrated Development Environment I made for my Final Year Project at The University of Hull, once I’d finished developing the feature complete version for submission. This meant I couldn’t show it to anyone when I was talking about it, so I’ve posted some below.

Dollar IDE Start Screen

Dollar IDE Start Screen

This is the first screen a user sees when opening the Application. They can create a new project or open one from a git repository or the local computer — a recent project list makes it easy to get back into a project you’ve been working on.

When making a new project inputs such as “Project Name” and “Save Location” are validated as-you-type so a user always knows how to resolve any problems (e.g. invalid characters or selected a directory that you don’t have write permissions for).

The “Project Type” drop down allows you to select templates for your project. E.g. A web template which has an index.html and ‘images’, ‘styles’ and ‘js’ folders included. The idea was to allow this to be extended so you that you could select, for example, a CakePHP project type and DollarIDE would download CakePHP and resolve all the dependencies, however this has not yet been implemented.

Dollar IDE Open Project from Github

Dollar IDE Open Project from Github

DollarIDE integrates with any git repository through LibGit2Sharp, but has enhanced integration with Github through their API. When you create a project you can have Dollar IDE automatically make and initialize a repository on Github for you and even set if you want it to be public or private. In the above screenshot you can see how Dollar IDE allows you to log in with you Github credentials (which are stored securely using Windows DPAPI) and then select from a dropdown which repository you wish to open and start editing.

Dollar IDE Syntax Highlighting & Autocomplete

Dollar IDE Syntax Highlighting & Autocomplete

Of course most of a developers time is spent in the code editing window itself. In the screenshot above you can see DollarIDE’s tabs, auto-completion and syntax highlighting.

Dollar IDE Settings

Dollar IDE Settings

Seen as developers spend a lot of time in their IDE I felt it was important to ensure that Dollar IDE could be customized to suit their needs. For example, in the Colour Scheme Settings window shown above the user can change both the accent colours and background colour of Dollar. This includes the obligatory dark theme.

You can also see the project pane on the right hand side of the background window in this screenshot. The project pane allows the developer to manage folders and files, and open them for editing — all from inside the same window as the code itself. Due to PHP often being deployed in a CGI setting, file locations are especially important.

Finally, this screenshot also shows that Dollar IDE currently makes no attempt to syntax highlight HTML, which is a great shame as PHP is often intermixed with HTML. This will be one of the first features I add when I eventually open source the project.

Danny

Introducing Dollar IDE – An Update on my Final Year Project

Dollar IDE - The Modern IDE for PHP

In the past few weeks, since the semester 1 exams in January, we third years have been blessed with some calm time without any exams to revise for or coursework to work on, just two days a week of lectures. During this free time I have been working on my final year project.

User Interface, Icons and a Name

As recently as two weeks ago I had very little to show anyone who asked to see my project due to it all being technical back-end stuff without user interaction, which was a shame as I’ve actually done a reasonable amount of work on it, however now I have developed some of the UI and finally have something I can ‘show off’.

My previously unnamed PHP IDE is now known as Dollar IDE, so called because of how all variables in PHP are denoted by a $ sign. At the top of this blog post you can see a fantastic logo which my friend, Harry Galuszka, who studies Graphic Design at Lincoln University designed for me.

The colour scheme I have chosen for the user interface and logos consists of various shades of purple,¬† an unusual choice for me because I don’t usually like the colour, however it is the ‘official’ colour of PHP, as you can see from the PHP.net website, and it also fits in quite well with the design language I am using, which is based on Microsoft’s Modern (formally metro) ideas.

The program doesn’t contain any bitmap images, instead I use XAML vectors, and is built using Windows Presentation Foundation meaning that the program works well on all screen resolutions and pixel densities, including Apples famous “retina displays”.

The main code editing screen isn’t ready to be shown off just yet, but below you can see some images of the “Start Screen”, which is the first window shown to the user when they launch the program. From here the user can opt to create a new Dollar IDE project, or open an existing Dollar IDE project or stand-alone PHP file. The 5 most recent projects and displayed in order to allow the user to rapidly get back to work on their website or web-app.

Dollar IDE - New Project Information Validation

Dollar IDE – New Project Information Validation

An important aspect of the start screen is its ability to inform the user of any issues in creating a new project before they continue, as you can see in the above screenshot issues are denoted by a red circle with a cross in, and fields which are OK are denoted by a green circle with a tick in.

This as-you-type validation means that mistakes can be spotted earlier, thus saving the user time and the exact cause of any issues can be determined and displayed. It’s always annoying when you enter some data into a program only to be told its wrong when you try to save… and then not be told what is wrong with it, being forced to make an educated guess. Dollar IDE gives you no such hassle.

Git Integration

Dollar IDE - Git and GitHub Integration

Dollar IDE – Git and GitHub Integration

One of the coolest aspect of my new IDE is its tight integration with the git revision control system. The program can interface with any git repository, hosted either locally or on a remote server, and has additional support for repositories hosted on the popular GitHub service.

In the main IDE window, which I will show off soon, the user will be able to

  • See which files have uncommitted changes
  • Commit files and projects
  • Merge files with conflicts
  • Pull changes from a remote server

Other Progress So Far

Other than what I’ve shown you in this very quick preview I have the following features working:

  • Correct tokenization of the most common PHP tokens
  • Complete coverage of the tokenizer with unit tests to ensure program correctness
  • A source code editing window with colour highlighted text and line numbers
  • Project loading and saving
  • File associations (to allow project files and PHP files to be loaded from Windows Explorer)

What’s Left to Do

There’s still rather a lot left to do on this project, but fortunately there’s still around another 2 months to do it in. I’m now feeling rather confident that I will finish my product on time with all of my primary functionality and a lot of my secondary functionality implemented.

I will of course keep the blog up to date on my progress.

Danny

 

Initial and Interim Report Results – 72% and 85%

Interim Report

The Interim Report is quite big, this is just under half of it

As part of the process of completing the final year project you have to submit two, smaller iterative, reports before your final report. These are a great opportunity to get in-depth feedback on your work before submitting your final report — they’re also a good way to evaluate your progress.

Initial Report

The initial report — which is produced early on in the project, in September — outlined the introduction and context of the project, for me this consisted of explaining what PHP is, what an integrated development environment (IDE) is and then discussing what other PHP IDE solutions are on the market today.

Initial ideas of what technologies and methodologies would be used for the project were also briefly discussed based on research I did over the summer, which had to be referenced in Harvard style.

Perhaps most importantly the initial report was the time when my project title, aims and objectives were set in stone for the first time. A time plan and associated gantt chart were produced to outline which work should be taking place at which time in order to deliver a finished product by the due date for the report.

The initial report was marked by Professor Ping Jiang and he awarded me a mark of 72%, which I was pretty happy with for my first mark of the third year. ūüôā

Interim Report

Yesterday I got back my mark for my Interim Report. The Interim Report is used to detail your progress since the initial report, and is submitted in January, about half way through your development time.

All the reports are iterative, in other words based off of the previous one. So I added in more detail about which methodologies I have been using to develop my project, updated my time plan to be more realistic and discussed the risks and ethical issues associated with the production of my IDE.

Dr. Martin Walker marked this report and I’m very happy to say that I got 85%. This gives me a good base on which to produce a good final project, especially with the in-depth feedback I received.

I will of course keep the blog updated with future developments on the final year project.

Danny

PHP Function Information Downloader

The Resulting XML Document from a PHP Downloader Request

I’ve spent much of the last day building a little application in preparation for more work on my final year project. As I’ve mentioned before, my project is to build an IDE for the web programming language PHP, so one of the things I have to be able to do is autocomplete and autocorrect PHP function names, and give the user information on functions.

In order to be able to do this I need the information in the first place, after a search online for a machine readable list of functions, their parameters and their descriptions — perhaps in JSON or XML format — I was unable to find anything of use, therefore I decided I would have to scrape this information from the PHP.net website myself.

Scraping for functions was made somewhat easier than I thought it might be because the people at PHP.net maintain a quick reference page avaliable at http://www.php.net/quickref.php. After downloading this my program searches¬†for anchor tags (links) in the unordered list element called ‘quickref_functions’, ensuring that what it is looking at is indeed a page about a function and not a page about a class, by ensuring the url starts with¬†“/manual/en/function”. I then grab the hyperlink reference from each anchor tag.

Once I have parsed the entire page I am left with a list of URLs, each of these URLs points to a page with all the information about a particular function. For example, the first URL I always have in the list is http://www.php.net/manual/en/function.abs.php which gives all the information about the function abs();

I go through and download each of pages at these URLs and parse them, taking out the function signature, which looks like this:

number abs ( mixed $number )

Information about each parameter, the return type, the description and a link to the comments section. In the coming few days I hope to be able to parse out information allowing me to flag deprecated functions, provide popular comments about the function and show code examples amongst other things.

At the moment once I have downloaded and parsed all 4700+ function pages and parsed them I output them to an XML document, eventually I will insert all of them as records into a NoSQL database.

Because downloading and parsing all the information takes quite a while I will ship my IDE with a pre made database of PHP functions, but will allow uses to, via an advanced settings panel, attempt a redownload of all functions in order to download new ones, or changes to old ones. I think this will be a function that only the most advanced users use, if anyone does at all, but it is however an interesting unique selling point to my product.

Danny.

“All In” on The Cloud

My Cloud Workflow

I got back to Hull yesterday morning, having left Dunstable at 5:30am, moved into my new house — which is spacious, well furnished and an all round upgrade from last years dingy old thing — and so today I had my first day back in the Forward Thinker Developments office. Over the summer I had been working from my new dual screen rig at home.

My "Battlestation" -- When you get a document up on that baby, you are seriously looking at that document

My “Battlestation” — When you get a document up on that baby, you are seriously looking at that document

I spent the vast majority of the day working on my Tablet, which was already set up with the correct FTP details, Git repositories and had all of the programs I wanted and needed on it, however when — towards the end of the day — my tablet finally ran out of juice I had to work on a PC which had an internet connection, but to which I had no administrative privileges.

This meant I was unable to install any of the programs I wanted and needed to do the work I needed to do; writing PHP script, committing changes to my Private GitHub repo and keeping in contact with the rest of the team, nor install the applications I like to have open whilst I work; such as Spotify for music.

The Cloud to the rescue.

I soon discovered that a little while back GitHub released a reasonably full-featured code editor to their website which you could use to make quick edits to files and then immediately commit them to the repository, it even included some syntax highlighting and simple auto-complete,, you can see this in the image at the top of this post. That meant that both writing my code and adding it to source-control was taken care of. I then found that you can make Skype calls, including Video and Voice messages from outlook.com, and, whilst this is still in beta, it seemed to work really well — this covered my communication with my team mates.

At this point I could work well, and get on with what I need to do, but something was missing, something very important indeed — perhaps the most important piece of software on any computer. A music player. I simply loaded up play.spotify.com and within seconds, after logging in with Facebook, was enjoying a bit of Frank Sinatra. Great programming music.

Whilst it is clearly preferable to have a fully featured IDE and source control client on your PC, when required these solutions do very well, and I wouldn’t be surprised if it wasn’t long before the web app counterparts to many traditional client side programs, such as Office, Visual Studio and iTunes are actually better and replace their client side versions. Perhaps, even today’s third year computer scientists will be involved in that and bring computing back to having a mainframe style server system as it did in the past, but on a much larger scale.

Danny

Fun with Formal Language

Tokenization

It’s been a while since I’ve updated you all on my progress regarding my final year project, in which I’m building an integrated development environment for the PHP scripting language.

At this stage I’m researching different methodologies and algorithms for what I want to achieve in my first prototype, as well as different methodologies for the actual software engineering experience in, and of, itself.

Whilst doing this I’ve found that writing code for the algorithms I’ve been researching has been super useful in determining the ease of implementation, and actually understanding the ideas involved themselves. In the above screenshot you can see an example of one algorithm I’ve implemented to tokenize my code.

Tokenization is the process of identifying the name and value of each token in a piece of code. A token is just a set of symbols, such as a $variableName or a keyword such as true — or even a simple code delimiter such as ; or { or }.

The above screenshot shows the code as highlighted by Visual Studio and as highlighted by my program, some of the formatting is a tad different than you would expect, but this is a very early version of the program and won’t be used as part of my final product — it’s just to help me visualize how an algorithm works.

Danny

Third Year Project Allocation

Today my third year project allocation was finalized, and so I am very excited to start talking about it.

A third year project, sometimes known as a final year project (though not by me because I’m on a four year Masters course), is a software development and documentation project spanning from¬†now until the end of the third year.¬†In that time we have to write about how we plan to make a piece of software, make said piece of software and then review how we did, what we created and how we would do things differently if we had our time over.

It is intended to be an exercise in real development for us all, rather than a piece of coursework that lasts only a few short weeks it will last a whole year, have real deadlines and been completely our own idea and run under our own steam. This means we set out own timetable for when work is expected to be completed by and us and us alone make sure said work gets done.

My personal aim with this project is to produce the piece of software that I am most proud of. A hope would be to have something that I could either sell commercially, or release as an open source product that would develop an active community.

So, onto the project I’ve been allocated. Below you can see the project description, originally written by Dr. Martin Walker

Code editor with syntax highlighting & autocomplete      

Although it is possible to program using nothing more than Notepad and a compiler, it is much easier to use an Interactive Development Environment (IDE) as the GUI for programming. Typical features include syntax highlighting, so that the keywords are readily visible, and autocomplete (e.g. like Visual Studio’s Intellisense) to improve efficiency or gain context dependent help.

This project would involve creating your own IDE, such as a simple Notepad++ style program (http://notepad-plus-plus.org). Primary features would include syntax highlighting and autocomplete, but other possibilities include compiler integration (to run the compiler from within your IDE) and feedback on errors, e.g. highlighting lines with errors in red. You could choose to make the IDE specific to a single programming language, or configurable so that it can be used with multiple languages.

My plan to work within this frame, but also add to it, is to create an IDE for the server side programming language PHP – The Hyperscript Pre-processor. This is the¬†programming language I first learnt, and therefore one of the languages —¬†alongside C# — that I am most comfortable with.¬†This means that hopefully, with my years of experience with the language, I will know what developers want in their IDE and be able to implement it in a good way, in fact I already have a few good ideas.

I do know, from years of doing PHP that there isn’t an IDE that makes developers as comfortable as say Visual Studio does for C# or C++ developers. I hope to change this.

One of the other interesting things about this project is that it will go really well with one of the modules I’ve chosen for next year, which is titled “Languages and Their Compilers”.

Expect to hear a lot more about this in the future!

Danny