Designing and Developing Websites with MAMP and MODx
Having a local development environment is an excellent idea. It is not at all difficult these days to install a xAMP stack. By this I mean an Apache web server, a MySQL database, and PHP/Perl. There is XAMPP for Windows and Mac, LAMP for Linux, and MAMP. My preferred development environment is OS X and MAMP.
The MAMP Package
You can download this complete, self-enclosed web development environment from the MAMP website.
After downloading and opening the MAMP .dmg file, simply drag and drop the MAMP folder to your Applications folder. If you like, drag and drop the MAMP dashboard widget into your Library/Widgets folder. No command line, no installation required.
Run the Mamp.app application, and configure the servers to your liking. I always set the Apache and the MySQL port to their defaults rather than the MAMP default. I've already made sure that Personal Web Sharing is turned off in my System Preferences. But if you like, you can have both available by using the MAMP defaults for the Apache and MySQL ports. You'll need to make sure to use those ports in your URLs and your database connections, though.
You can also choose where to have your htdocs folder (your site root) if you don't want it in /Applications/MAMP/htdocs. You could have it in your own user folder if you like. I just leave it where it is, and in the Finder drag the htdocs folder into the left sidebar for quick access.
You can also choose which version of PHP you want to develop for. That is one advantage to the Dashboard widget; you can quickly switch PHP from 5 to 4 for testing purposes.
The start page includes links to an installation of phpMyAdmin and SQLiteManager, as well as a phpinfo() display. It has some helpful tips for connecting to your databases in your php scripts, and a brief FAQ. It also has is information on how to change the default username/password for the MySQL database engine. If you will be using this environment for anything you might regret losing, you really need to change the defaults immediately.
Of course, the Pro version has a lot more options, but I find the free version quite sufficient for development purposes.
The MODx CMS
For a few years now my preferred content management system has been the MODx CMS/CMF. For my intermediate level of PHP programming and HTML/CSS design skills it has proven to be a perfect match. It is also an excellent choice for a freelance developer, since it is quite easy to control the manager interface to allow clients to edit their content without the fear of breaking the site. You can give your clients just the amount of access they need, and no more.
The biggest advantage of MODx to the web designer is its simple templating system. Actually, it's not really even a system. You simply use the HTML code for the look you want, as in any flat HTML file, then replace content text and dynamic data (such as menus) with simple tags. Each document is processed to replace those tags within the HTML template with material relevant to that page as the page is requested.
The advantage to the PHP programmer who wants to develop custom dynamic content is the separation of the presentation from the layout using simple tags to include the final return value of your code. There are tags that are constant across the entire site, and there are other tags that can be assigned to the entire site but whose content can be customized on a page-by-page or section-by-section basis. The developer can work on code independently of the designer, who only needs to put the elements he wants in the appropriate place in the HTML layout.
Put together, this makes MODx a perfect framework for Web 20 and AJAX applications.
Installing MODx
Installing MODx is as simple as downloading the archive, unzipping it, and moving the resulting folder to your MAMP's htdocs folder. Name the folder something appropriate, like "modx". Now open your web browser to localhost/modx. Since I use my localhost for development, I have localhost set as my browsers' home page. This way I get a list of all the development projects I have and only need to click on the one I want to work on.
You will get a big red box asking if you want to install MODx now.
Click on the link, and follow the instructions on the following pages. A few things of note.
You'll need to know the MySQL login and password. On a stock MAMP environment the MODx installer can create the database if it does not already exist. Sometimes this can cause a bit of confusion; by default MODx will use a database named 'modx', and if you have already created a database and didn't notice that you need to change the database name in the installation, you might be puzzled as to why "your" database is still empty!
By default MODx will prefix every table name with 'modx_', so you'd get 'modx_site_content'. This is so you can use the same database for other things; a forum or an ecommerce application perhaps. Again, you can change this to suit yourself. MODx keeps track of this internally, so you don't have to worry about it once you edit the installation form.
One of the installation pages offers a list of elements to install. It also offers the option of installing an entire demo site. It is highly recommended that a first-time user of MODx install the demo content. It will have a simple blogging system, search, menus, and a selection of templates to choose from. Examining this will give you a good start to understanding how to use MODx to advantage.
Once you've filled out the forms and have selected what you want to install, the installation will create the database (if you didn't tell it to use one you've already created), create the tables and insert whatever options you selected.
Finally, you're given a link to log in to the manager and get started on developing your site.
Working with MODx
The first thing you need to do is set up the configuration. Usually this is the first page that a new MODx installation will present; it can also be accessed from the Tools menu. I would strongly recommend that you go through it and examine each option. You may not understand what they are all for at first, but it will be very useful to know what's there as you learn the system.
On the left of the Manager screen is the Document Tree. This displays all of the documents that will be made into pages. They are listed in a hierarchical tree reflecting a parent-child relationship. Editing the main content of each document is simplified by a default installation of the TinyMCE rich text editor.
Templates form the HTML skeleton for every page on the site. They simply consist of ordinary HTML with the addition of MODx tags to dynamically add blocks of content, such as menus or side blocks that you only want to display on certain pages. People just getting started with MODx are often confused by the template system because it is so simple. There are no limits whatsoever on how you can design your site. Frames? fine. Tables? great. Pure accessible CSS? go for it. Make a page with Word, save it as a web page and use that for your template? if you really want to, go ahead. Actually, I've built some sites with no more than a Word document saved as HTML. Some cleanup of the inline styling converting the styling to an external CSS file, replace the content text with MODx tags, and they work well enough.
The structure of the Document Tree will be reflected in your dynamic menus, generated by menu snippets; no need to edit menus when adding or removing pages. The menu snippet can also add classnames to the menu item for the current page and its parents, allowing you to style your menu to distinguish the active items in the menu. A news listing snippet in your home page content will display brief summaries and links to the latest two news articles in your "News" folder, while the same snippet with different parameters will display more of a summary plus the date and the author of the latest 10 items, if that's what you want, on your News page. A gallery snippet will display your images with your choice of fancy Javascript effects, and allow you to upload images as you please without needing to change the gallery page at all. And if you want to do something that there isn't already an existing community-provided snippet for, you can write your own.
As a true Content Management Framework, MODx will allow you to go to your limits, then stretch those limits, in adding custom features to your sites. Working on a local development environment gives you the freedom to experiment and learn without worrying about breaking a live site, or even whether the Internet is up today or not. MAMP makes setting up a local development environment easy, so you don't have to spend your time learning how to be a server systems administrator. MODx makes design and development as simple or as complex as you need it to be, giving you the structure to organize your site along with the freedom to organize it in any way you like.
