News! I’m working as a Drupal Developer in Germany

The summer was wonderful. We finished the restoration of a house in the middle of July and we wanted to enjoy some weeks at the beach. As you know, we are Germans and there seems to be some truth in all these stereotypes about Germans, they always make plans 😉 So we did, we made a list about how we wanted to spend our “free” time. The plan was to work a few hours on projects that should be finally finished, like the green roof project in the garden, the Cave in 22 Grand’ Rue, some “little” things in our house … and spend the rest of the time at beaches, in art galleries, antique markets, reading books, … well … it worked somehow – I was everyday at a beach for these 8 weeks and now I’m the mayor 🙂

Plage Naturiste
Plage Naturiste

Nextcloud appeared in June and I’m very interested in the project. I went to Stuttgart in August for a Hackweek and to Berlin in September for the first conference. I wrote some blog posts about Nextcloud box and other aspects of the project.

While working on our summer projects we discussed how we will earn money in the future. Usually we do that regularly at Dec 31th but this time we planned in July at the beach. We came to the conclusion that we renovated more or less enough houses for us (You can buy one btw.). There is still one house project left together with our daughter and her husband but I thought

May be I can work on a nice software project.

Something related to Nextcloud, RaspberryPi, internet of things, Drupal 8. All these “new” stuff hat appeared while I was renovating 🙂

I applied officially at certain companies (my first applications since nearly 20 years) and I learned a lot about LinkedIn, Xing, Monster, writing a good CV and all those things where I’m still not good in (Help me to become better). A company in Frankfurt hired me as a Drupal developer. It’s a “digital interactive agency” called artus.com and their mission is:

We plan, create, develop and implement anything digital that builds our clients brand and business.

“Anything digital” sounded good and I never worked in an agency like that! They are using Drupal 8 for bigger projects, e.g. worldvision.de. They are planning to use it in more projects. The only problem is that they wanted to have me in their office in Frankfurt, Germany. We agreed on a kind of testing for six weeks and then
– I hope to continue with remote work from Fitou and
– they hope that I will move to Frankfurt.
I’m curious how we’ll figure that out – stay tuned!
Living in Frankfurt is ridiculous expensive, so I tried to find a place via Twitter and Facebook.

To my own surprise I found something for 4 weeks in Bad Homburg and something for 2 weeks in Rödelheim :).
Thanks to Android_oma and 12schm34idt56hil78ke.

At the moment I live in Bad Homburg and commute with my bike to Frankfurt. Well, it’s actually not my bike, it’s a super posh electrical bike that I’m allowed the use (a blog post on that is coming soon). Each day I drive 40 km. I track the tours with an App, so if you want to follow me, become my friend on Strava. First week 200km!

First week
First week

I have no time anymore!

I start at 7:30am with my bike and I come back at 8pm with my bike. Additionally, this country is so cold, windy and mostly dark when I’m driving! It’s nice sometimes, you see 😉

Frankfurt

The work itself is interesting: The dev team works with PHPStorm, Vagrant, Bitbucket, Slack, several servers and is trying to organise everything as easy and smooth as possible. I’m curious to learn everything and it was for sure a good idea to be six weeks physically here! Last Friday, we had a so called Quarterly, followed by a workshop with all employees (37), very interesting! Later on there was a great dinner and we ended up with a little group in a kind of club in Frankfurt (Pik Dame).

The last days I heard so many opinions about work, controlling, planning, project management, creativity, brand management, mismanagement, open source software, closed source software, company culture, employee driven companies and the future in general that my daily commuting on the bike is a good way to reflect on that. Since that workshop I’m a proud member of a new team and I’m partly responsible for a handbook, that will help newbies like me to understand processes in this company.

Plan

I want to write about my experiences as often as possible but as I already said  in the headline – I have not that much time anymore 🙂

Save

Save

The post News! I’m working as a Drupal Developer in Germany appeared first on Hagen Graf.

6. Display Content

After you managed to create content, you need to think about how displaying it. This sounds simple but it is quite important. In the last chapter we created an article and featured this article on the frontpage. Visitors can see the article only by visiting the front page.  

The frontpage

The standard frontpage (Home) has the menu item type Featured Articles. When you access the Main Menu in Menus → Main Menu you probably noticed the little “home” symbol. It means, that this menu contains the link to the front page (Figure 1).

Figure 1: Main menu with Home link
Figure 1: Main menu with Home link

You have different configuration options while editing the Home link. The featured articles menu item type offers leading articles, intro articles, columns and links. To understand how it works, we need a few articles. For the sake of simplicity in our example, just copy your first article. The copy process is possible in the Save dialog and in a batch dialog. Select the article you want to copy and click the Batch icon (Figure 2).

Figure 2: Copy articles in a batch
Figure 2: Copy articles in a batch

If you have more than 4-5 articles (don’t forget to “feature” them), you can try out the different options. Go to Menus → Main Menu → Home and take a look at the Layout tab. You can see one leading article, three intro articles in three columns (Figure 3).

Figure 3: Layout in Home menu link
Figure 3: Layout in Home menu link

Figure 3: Layout in Home menu link

On your front page it appears like in Figure 4.

Figure 4: Default frontpage
Figure 4: Default frontpage

Categories, tags and menu links

Joomla offers three possibilities to structure your content: Categories, Tags and Menu links. Each article belongs to one category. Categories can be nested. Menu links can point to articles or categories or they can point to a set of articles as with the featured articles for the frontpage. You can add an unlimited amount of tags to each article.

This simple and easy extendible structure offers amazing ways to display content.

As you already know, Joomla!’s templates are offering positions. Positions are places where you can place your content and your navigation elements.

Joomla!’s content display system is the arrangement of modules and the components on predefined templates positions.
 Each page can have exactly one component and an unlimited amount of modules.

Categories can be created and managed in Content → Categories.

Menus can be created, managed and filled with links in Menus → Manage (read more about creating a menu in chapter 4 – It’s all about users, permissions, modules and articles)

A navigation on top

An empty Joomla page has a “Main Menu” at position-7 in the default template. In the Protostar template position-7 is in the right sidebar, but let’s assume, we want to have the main menu on top. To achieve this goal, go to Extensions → Modules → Main Menu and move it to Navigation position-1. In the Advanced tab change the value of Menu Class Suffix to “ nav-pills” (there’s a white space at the beginning!) (Figure 5).

Figure 5: Menu Class Suffix
Figure 5: Menu Class Suffix

It will change the class attribute in the HTML code and when everything is correct, your navigation should look like in Figure 6.

Figure 6: Navigation with Main Menu
Figure 6: Navigation with Main Menu

Articles in categories can be displayed in “blog style” like on the frontpage or as tables of articles. Both are highly configurable. You just need to check out a few menu item types.

With these few tools you can create amazing layouts.

The post 6. Display Content appeared first on Hagen Graf.

4. It’s all about users, permissions, modules and articles

Back to 3. Design, Layout, Colors

I know, we still have no content on our site but before we create it, let’s have a look on the user accounts of our new Joomla website.
When you installed Joomla, you created the Super Administrator account. This user is allowed to do anything. It is nice to be that user but it is dangerous too. You will probably have more than one user account on your website, e.g. authors who write articles.

To get more used to these topics, let’s build a platform for authors where they can post articles and upload images without the need to enter Joomla’s control panel. Follow the example and you’ll learn a lot about Joomla 🙂

About users, roles and permissions

Users are in general able to login on the frontend and/or the control panel just depending on their role permissions. A user account has to be a member of a user group. Instead of assigning access permissions to each user, they are assigned to a group. The individual user is then assigned to one or more groups. Imagine you have 10,000 users in four different groups. It’s very easy for the administrator to change the permissions for each of the groups. Without groups, you would have to change every user account manually. However, when using groups, you only have to change permissions once!

Joomla comes with predefined groups like author and publisher which are easy to understand. An author is able to create/write something, a publisher has the additional permission to publish content.

  • The predefined frontend user groups are: visitors, registered users, authors, editors, publishers.
  • The predefined control panel user groups are: manager, administrator, super administrator

Example: A website where authors can post articles

This is a very simple workflow but it covers some possibilities that exist in Joomla. I assume that you have a “naked” Joomla without sample data and you have a super administrator user account.

The desirable scenario

  • Admin user in control panel:

    – activates the admin notification when someone creates a new user account

    – creates a user menu for registered users with a link to create an article
  • Visitor on website:

    – registers as a new user
  • Admin user in control panel:
    – 
receives a notification and assigns the user to the authors group
  • Author user on website:

    – is able to create an article but is not allowed to publish it
  • Admin user in control panel:
    
- receives a notification that there is new content available

    – publishes the article on the frontpage

Parameter and user menu

We have to set a few switches in the user options. Go to Users → Manage → Options and activate Allow User Registration and Notification Mail to Administrators (Figure 1).

Figure 1: Notification Mail to Administrators
Figure 1: Notification Mail to Administrators

 

Then we need a menu for logged in Users. Go to Menus → Manage → Create new menu and create one:

  • Title: User
  • Menu Type: user
  • Description: A menu for a user with useful links

Save and close it. You have now created a kind of menu container. What’s missing is the links inside the menu container and a linked module that displays the new menu at a certain position in the template.
 To create and link the module, click on the link Add a module for this menu type (Figure 2).

Figure 2: Add a module
Figure 2: Add a module

In the module form you have to add a title (User Menu), the position (Right – Position-7 in the Protostar template), the access permission (registered users). Don’t forget to save & close it (Figure 3).

Figure 3: Creating the user menu module
Figure 3: Creating the user menu module

 

Now we need the “Create article” link in our menu that should be shown to authors. Go to Menus → User → Add New Menu Item (Figure 4).

Figure 4: Creating a link in the user menu
Figure 4: Creating a link in the user menu

 

In the following form you have to enter the name/description of the link (Menu Item Title), select a Menu Item Type (Figure 5) and restrict the access to registered. Each Joomla component can provide Menu Item Types. Our type (create article) is provided by the content component which is a part of Joomla core.


Figure 5: Select Menu Item Type
Figure 5: Select Menu Item Type

 

After you saved and closed the dialog a new menu item should be displayed in the list (Figure 6).

Figure 6: User Menu with the new menu item
Figure 6: User Menu with the new menu item

Test your work! Login on the frontend with your super administrator account. After the login, our new user menu with the create link appears (Figure 7).

Figure 7: User Menu after Login
Figure 7: User Menu after Login

 

Please log out after the test.

Registration as a new user

Now we create a new user account. Please access the website as any other visitor and click the Create an account link. Fill out the form and click the Register button (Figure 8).

Figure 8: Registration form
Figure 8: Registration form

 

If your server stack allows sending emails, a notification email will be send to the email address of the super administrator account.

Joomla offers a CAPTCHA to prevent spammers. To use it, activate the CAPTCHA plugin under Extensions → Plugins and select it in the options of the User Manager where you can configure the general behaviour of the login process too.

Assignment of the new user to the authors group

Log in with your Administrator account on the control panel, access Users → Users and click on the name of the new user (Hagen Graf). Check the Author group in the Assigned User Groups tab (Figure 9).

Figure 9: Assignment of a group to a user
Figure 9: Assignment of a group to a user

Depending on your environment it might be necessary to enable and activate the new user account. Just click on the red icons to do so (Figure 10).

 

Figure 10: Activate and enable user
Figure 10: Activate and enable user

Now we have a new author on our website.

The new author creates an article

Now switch your identity to the one of the new author, log in with your new user account on the website and click the create article link. Just add a title and a few words and click save (Figure 11).

Figure 11: Create an article
Figure 11: Create an article

 

The article is saved and submitted but the user (you) cannot see it, because it is not published. I configured this workflow intentionally as in some cases it is desired to have another person to edit the created content and then publish it.

Of course, it is also possible to skip that, add the user to the group Publisher and then the article would be published immediately.

The admin publishes the article on the frontpage

Joomla comes with a messaging system and this system creates a message when new content was created by a user. Depending on your settings (Components → Messaging → Options) the admin receives that message by email or via the screen. 
The admin has to go to Content → Article Manager and publish the new article. If the article should appear on the frontpage, click on the featured icon (Figure 12, Figure 13).

Figure 12: Publish an Article
Figure 12: Publish an Article

 

Figure 12: Featured Article
Figure 12: Featured Article

Tweaking the process

As we already noticed while following this example, many topics are covered and the configuration is easily done depending on your needs. There is a huge amount of permissions, options and settings to discover.
I’ll provide a few examples in the following chapters.

3. Design, Layout, Colors

Back to: 2. A fresh Joomla Installation

The template is one of the most important pieces of a website. It provides the appearance, the design. The combination with relevant content motivates new visitors to stay on your site and explore. Regular visitors and users appreciate being on a site with a beautiful and useful design. Think of other products, for instance. A car needs a good engine and tires but one of the most important reasons for buying one is often the design.

Even if the design is not the main reason, it is often a trigger to contemplate the idea of purchasing and may cause a buyer to consider more tangible reasons. If the design is well-made, people expect the rest to be well-made, too (Figure 1, Figure 2)!

Figure 1: Pontiac Aztek (2005) https://en.wikipedia.org/wiki/Pontiac_Aztek
Figure 1: Pontiac Aztek (2005) https://en.wikipedia.org/wiki/Pontiac_Aztek
Figure 2: Fiat 500 (2007) https://en.wikipedia.org/wiki/Fiat_500_%282007%29
Figure 2: Fiat 500 (2007) https://en.wikipedia.org/wiki/Fiat_500_%282007%29

Both of these cars are made for different target groups and they come of course from different car makers in different countries. They are just an an example of different approaches in design.

A few definitions related to the design of your website

I just want to clarify a few terms to sensitize your thinking.

What is design?

  • The noun design stands for a plan or drawing which shows the function and the lookout of an object, to accomplish particular goals in a particular environment and to satisfy a set of requirements.
  • The verb “to design”stands for creating a design, in an environment (where the designer operates).

The term design can be used in

  • art (“almost instinctive”, “built-in”, “natural”, and part of “our sense of ‘rightness’),
  • engineering (product design of a new car)
  • production (planning and executing)
  • processes (business process modeling)

What is color?

Color is the visual perceptual property corresponding in humans to the categories called red, green, blue, and others. Individual colors have a variety of cultural associations such as national colors. There is great diversity in the use of colors and their associations between cultures and even within the same culture in different time periods.
 HTML colors and CSS colors can have 16 million different values. The combination of Red, Green, and Blue values from 0 to 255, gives more than 16 million different colors (256 x 256 x 256).

Example:

BLACK = color HEX #000000 = color RGB rgb(0,0,0)

Several online tools like the one in (Figure 3) can help you to find the right colors for your website project .

Figure 3: Popular Color Combinations
Figure 3: Popular Color Combinations

Figure 3: Popular Color Combinations – http://www.colorcombos.com/popular-color-combinations

What is page layout?

Page layout is the part of “graphic” design that deals in the arrangement and style treatment of elements (content) on a page.
To speak in Joomla terms, it is the arrangement of Joomla modules and the components on predefined templates positions.

Templates

A template involves repeated elements visible to the visitors. Using a template to lay out elements usually involves less graphic design skill than that which was required to design the template. Templates are used for minimal modification of background elements and frequent modification (or swapping) of foreground content. Joomla! come with two site- and two administrator templates.

User Interface Design (UI) / User Experience Design (UX)

“User interface design (UI) or user interface engineering is the design of user interfaces for machines and software, such as computers, home appliances, mobile devices, and other electronic devices, with the focus on maximizing the user experience.” https://en.wikipedia.org/wiki/User_interface_design

“User Experience Design (UX) is the process of enhancing user satisfaction by improving the usability, accessibility, and pleasure provided in the interaction between the user and the product.” https://en.wikipedia.org/wiki/User_experience_design

The connection between both types of design is fluent. A simple but quite good explanation is based on Ketchup bottles. The UI part focusses on the interface of the bottle, the UX part of the experience in the moment of engagement (Figure 4).

Figure 4: UI and UX https://twitter.com/markfidelman/status/651774238169272320
Figure 4: UI and UX https://twitter.com/markfidelman/status/651774238169272320

Web design

Web design is somewhat like a handcraft and a broad term covering many different skills and disciplines that are used in the production and maintenance of websites.
 Possessing skills in techniques like HTML, CSS, JavaScript, PHP, image editing, UI, UX and many others is imperative. Because it’s nearly impossible today to start from scratch, even the Joomla! default template Protostar uses the CSS/JavaScript Framework Bootstrap as a solid foundation.

Joomla! is only one more tool in the toolbox of a web designer.

A good Joomla template is not only about colors and graphics. The shape and positioning of the content is just as important. The website has to be user-friendly and reliable. Exactly this challenge reminds me of the two cars again.

Web design is still a young profession and it is starting to become an industry.

A web designer often has to deal with low bandwidth, incompatible browsers, inexperienced content editors and other people involved in the process of creating a ‘good’ website.

The creation of a Joomla! website is often a process, in which everyone involved learns a lot.

Good web design is hard work and everyone has to start somewhere!

After having your site up in the language you prefer, most people start tweaking the colors and want to upload e.g. a new logo, even if there is no content so far. Joomla comes with preinstalled templates and so called template styles. A template style is a set of options (color, logo, layout) for a template. The configuration possibilities are depending on the template. Some template have a huge variety of settings and some are quite limited.
 It is possible to create as many styles as you want and assign them to different pages of your website.

Structure

In Joomla a single page is generated by the HTML output of one component, several modules and the template. Each page is accessible via a unique URL. Take the front page as an example. The content component produces the HTML output for the articles in the middle. This screenshot is based on the Joomla Beez Template (Figure 5). The blocks next to the articles are different modules. You can combine the HTML output from one component with the HTML output of any number of modules. Existing modules can also be reused on other pages.

Figure 5: Joomla! front page
Figure 5: Joomla! front page

Positions

You must know, of course, at which point you can assign modules at all. For this purpose, each template provides so-called positions. In order to see these positions you have to enable the Preview Module Positions switch (Extensions → Template → Options). After that, you can access your website by using the parameter tp=1 (http://localhost/index.php?tp=1) or click the Preview link in Extensions → Templates (Figure 6).

Figure 6: Template Manager - Site Templates
Figure 6: Template Manager – Site Templates

You’ll see the emphasized module positions with their names (Figure 7).

Figure 7: Module positions - Protostar template
Figure 7: Module positions – Protostar template

In Extensions → Modules you can assign one of these positions to each module. If you need the module at different positions, you may also copy it.

Core Templates

To make things easier for you, Joomla! core comes with two site templates and two administrator templates. You can see a preview in Extensions → Templates → Tab Templates. You can filter between Site and Administrator templates by choosing the location filter (Figure 6 and Figure 8).

Figure 8: Templates - Administrator Templates
Figure 8: Templates – Administrator Templates

Styles

Styles offers the possibility to create and use different versions of one template. This is useful if you want to have different templates styles on different pages. A template has a minimum of one style. In this style, configurations can be made depending on the template, such as changing the colors or uploading the header logo. You may set the default style for your site in Extensions → Templates → Styles.

Example: An individual Style

Let’s create an individual style for our website:

  • Name: cocoate
  • Template Colour: #f88638
  • Fluid Layout

You can create additional styles by duplicating an existing style. For this example I duplicate the existing protostar style (Figure 9).

Figure 9 - Duplicate a style
Figure 9 – Duplicate a style

A new style appears, the name is protostar – Default (2). We’ll change the name in the next steps. Set it as the default style by clicking the star icon (Figure 10).

Figure 10 - Configuring a template style
Figure 10 – Configuring a template style

Check it and click the Edit Button. Enter the name for the style. In the Advanced tab you can choose colors, upload a logo and a few more parameters (Figure 12, Figure 13)

Figure 12 - Options tab - Style
Figure 12 – Options tab – Style
Figure 13 - Uploading a logo
Figure 13 – Uploading a logo

Each style can be assigned to a menu item (Menus asigment). If you would like a green background on your site when people click on menu item A, for example, and a blue background when they click on menu item B, you can assign the corresponding styles. In my case I have only one menu item and I already marked this style as default style, so it’s not necessary to assign it to a menu item

After saving the style, the website looks different (Figure 14) and because the Protostar template is fully responsive, the website is shown perfectly on a mobile device too (Figure 15).

Figure 14 - The website on a desktop PC
Figure 14 – The website on a desktop PC
Figure 15 - The website on a mobile device
Figure 15 – The website on a mobile device

Create your own template and customize it

A template in Joomla is the base of a style and consists of various files. It’s possible to edit the files of a template online.

BUT! You should NEVER change the source code of a core template. The reason is very simple. Your changed code will be overridden by the next Joomla! update!

It is possible too to copy an existing template, so let’s do that first.

Copy the Protostar template in Extensions → Templates → Protostar Details and Files by clicking the Copy Template button. Give your individual template it a name. I call mine “MyTemplate” (Figure 16).

Figure 16: Edit Template files online
Figure 16: Edit Template files online

Beside the new template Joomla creates a new template style too (have a look). It is possible now to work on the new template. You are able to create, delete and edit files (Figure 17).

Figure 17: Customize your template
Figure 17: Customize your template

It’s of course possible to edit the files in an external editor too.
 The site templates are located in the folder /templates. Each template has it’s own folder. There is now a mytemplate folder too. Under the /templates/systems folder you’ll find the template files to edit the Offline and the Error page templates.
 The admin templates are located in the folder /administrator/templates.

Template overrides

Overrides are a possibility to change the markup of an extension inside the template. The interesting point is, that your individual template is able to do that. Your template can even rewrite the output of third party extensions. A common use case is an alternative layout for an article in Joomla!.

In the template manager it is possible to create these overrides too.

Conclusion

There are by definition endless possibilities to design something creative. Joomla give you everything you need to build something amazing and hopefully you start to get more curious.

2. A fresh Joomla Installation

Back to: 1. What is Joomla

Panic …. where and what to download? Where to install? Why installing? What do I install?

You have a few possibilities to start with Joomla. You can install Joomla

  • on your local computer
  • forever free at joomla.com
  • on a server from your hosting provider
  • on the 90-day free Joomla! demo account (demo.joomla.org)

In order to install Joomla! on your local computer, it is necessary to set up your “own internet”, for which you’ll need a browser, a web server, a PHP environment and as well a Joomla supported database system. We call this a solution stack and a client server system. 
A solution stack is a set of software subsystems or components to make a fully functional Joomla website possible.
 The solution stack we need consists of

  • the operating system (Linux, Windows, OSX)
  • the web server (Apache, IIS)
  • the database (MySQL, PostgreSQL)
  • the script language (PHP)

You can build a solution stack on your own machine at home or you can buy or rent it from a hosting company in different “flavours”.

The specific requirements for Joomla 3.5 are described in Table 1.

Software Recommended Minimum More information
PHP (Magic Quotes GPC off)
5.5 + 5.3.10 + php.net
Supported Databases:
MySQL (InnoDB support required) 5.1 + 5.1 + mysql.com
SQL Server 10.50.1600.1+ 10.50.1600.1+ microsoft.com/sql
PostgreSQL 8.3.18 + 8.3.18 + postgresql.org
Supported Web Servers:
Apache (with mod_mysql, mod_xml, and mod_zlib)
In order to use SEO URLs, you will need to have the Apache mod_rewrite extension installed.
2.x + 2.x + apache.org
Nginx 1.1 1.0 wiki.nginx.org
Microsoft IIS 7 7 iis.net

Table 1: Requirements for Joomla 3.x

Since this issue is the same for all PHP-based systems, I would like to look a little closer on that topic.

Installation variants of PHP-based systems

You need all the components mentioned above to install a Joomla! system for yourself. PC, browser, and Internet connection are usually available. There are a number of options for web server, PHP interpreter, and database.

You can:

  • set the system up locally on your PC
  • set the system up on a server in a company’s Intranet
  • rent a virtual server from a provider
  • rent or purchase a server from a provider (with root access)

You can also:

Have the web server and database located on computers that are physically separated from each other.

As mentioned above you can also, of course, use different:

  • brands of web servers
  • versions of PHP interpreters
  • Versions of MySQL databases
  • And on top of that, you can install and operate all these components on various operating systems.

This freedom in choice of resources can sometimes confuse a layman. Therefore, we will discuss a few typical scenarios.

Local Test Environment

If you are at home or in your office, for example, and want to set up a Joomla! website, you may use any of the following operating systems.

Windows Operating System

For a Windows operating system you can use either of two web servers:

Use the in build Internet Information Server, install PHP, MySQL and configure them or take a pre-configured package (XAMPP), unpack it on your computer, and everything you need is there (http://apachefriends.org).

Linux Operating System

Here it depends on the distribution version you have. All the distributions allow simple installation (with a click of the mouse) of the Apache, PHP, and MySQL packages. At times, depending on distribution, they may already be pre-installed. So you can use the programs contained in the distribution or a preconfigured package (XAMPP); extract it on your computer and everything you need is there (http://apachefriends.org).

Mac OS X Operating System

In Mac OS X operating system, you have a default web server (Apache) in your system that you have to activate, but unfortunately not PHP and no MySQL.

So you can use the installed Apache web server and install the missing software or the pre-configured XAMPP package for Mac OS X. Another complete package by the name of MAMP is also very popular with the Mac OS X environment (http://www.mamp.info).

Production Environment

You have several options here as well.

Rented Virtual Server

You rent a web-space package with database, PHP support, and often also your domain name from a provider. In this case you have a functional environment and you can install your Joomla! into it. Consult your provider as to the version choices (PHP, MySQL). Sometimes providers offer Joomla! pre-installed with various templates. If this is the case, all you have to do is activate Joomla! with a click of the mouse and it is ready for you.

Your Own Server

You rent a server from a provider and install the operating system of your choice. You are the administrator of the system and you can work on it, just like on your PC at home.

Before you venture into the wilderness of the Internet, you should first practice on your local computer. This has the advantage that there are no connection fees, it is very fast, and you can practice at a leisurely pace.

You may even have a small local network at home where you can install Joomla! on one computer and access it from another.

Remember that there are probably more current versions on the respective project sites on the Internet.

Stumbling stones

This topic is very complex because there is a vast number of providers and an even greater number of installed web server, PHP, MySQL versions and web space management tools. Crunch points during the installation often consist of:

  • an activated PHP Safe Mode, preventing you to upload files,
  • ‘forbidden’ rewrite paths with the Apache web server because the so-called Apache Rewrite Engine (mod_rewrite) is not activated,
  • the directory permissions on Linux and OSX, which are set differently than in Windows.
  • Basically, the easiest way that almost always works, is the following:
  • Download the current file package from the project website to your home PC and unzip everything into a temporary directory.
  • Load the unpacked files via FTP on your rented server or to the directory of your local installation. The files must be installed in the public directory. These directories are usually called htdocs, public_html or html. If there already are other installations in that directory, you can specify a subdirectory

If the solution stack is up and running, we call the result a server. The server can be your local computer or any other computer. All the visitors and users of the website are using a browser on their computer to access your Joomla site. We call them clients.

The “classic” LAMP stack (https://en.wikipedia.org/wiki/LAMP_%28software_bundle%29) looks like in Figure 1.

Figure 1: LAMP solution stack (graphic Wikipedia)
Figure 1: LAMP solution stack (graphic Wikipedia)

The Joomla Web Installer

Thanks to the web installer, Joomla! can be installed in only a few minutes.
 The Joomla! files will be copied to the public document root folder and configured with the Joomla! web installer.
 Download Joomla! 3.5 from joomla.org (joomla.org/download.html) and unpack the files into your public document root folder of the web server (e.g.: /htdocs). 
From now on, everything is going really fast because the Joomla! web installer is working for you. Go to URL http://localhost/ or the appropriate URL of your server.

Notice: If something is wrong with your solution stack, the pre installation check helps you to verify whether your server environment is suitable for the installation of Joomla!. As long as you see a red marker, your solution stack is not configured in a proper way and the installer refuses to install Joomla. When using Unix-like Systems (Linux, Mac OS X), you have to pay attention to file permissions. This is particularly important for the file configuration.php. This file will be generated at the end of the installation with your personal values. If the installer can not write in the folder, Joomla! can not be installed. In this case, configure the rights and then click the button repeat check.

Figure 2: Pre Installation Check
Figure 2: Pre Installation Check

Step 1 – Configuration

In the main configuration window you have to describe your site and the administrator user. Furthermore, there is a switch to decide whether your site will be immediately visible for visitors (online) or if it will display a maintenance page (offline). This configuration setting is useful when you install Joomla directly in your live hosting environment (Figure 3).

Figure 3: Installer - Main Configuration
Figure 3: Installer – Main Configuration

Step 2 – Database

You can use various database servers with Joomla and you have to decide which database server you want to use and you need to enter your database parameters (Figure 4). In your local server environment you can create any number of databases.
In the MAMP package and in Ubuntu Linux, you have a MySQL user with the name root. The user root is the MySQL administrator and can, therefore, do everything in your MySQL system. The password depends on your server environment (no password is needed with XAMPP, with MAMP the password is root too). 
When you are in a live hosting environment these parameters will be given to you by your provider.

Figure 4: Installer – Database Configuration
Figure 4: Installer – Database Configuration

Enter the following values into your local installation:

  • Host Name: localhost
  • username: root
  • Password: [only you know that]

Now select the database name. In a productive environment on a database server with a provider, you probably have a fixed quota of databases and the database credentials are predefined. If you have root permission on your database server, you can enter a name of a new database. Joomla! will then create that database. You can select whether the tables of any existing Joomla! installation in this database should be cleared or saved and marked with the prefix bak_. The table prefix is really practical. In front of each table name generated by the web installer, it writes the text that you typed in the appropriate field. As a default, the web installer suggests a randomly created one, like n9y3l_ . This has a simple reason. Sometimes you may only be able to get one MySQL database from your provider. If you want to run two or more Joomla! sites, you have a problem, as the tables do not differ from each other. With the table prefix it is possible to distinguish several tables (client01_ or client02_). Here, you should use the default n9y31_ . The prefix is also used to indicate saved data (bak_), see above.

Step 3 – Finalization

In the third step, Joomla summarizes the configuration settings and asks if you want to install sample data (Figure 5).

Figure 5 – Finalisation
Figure 5 – Finalisation

In former versions of Joomla it was only possible to install ONE set of sample data. Since Joomla 3.x it is possible to choose of several sample data sets. The “sample data system” can be used to configure a predefined site layout and example content for a weblog (Figure 6), a brochure site (Figure 7), a “Learn Joomla” site with a Joomla tutorial inside (Figure 8) the default site (Figure 9) and a test Joomla site where every possible menu link is activated as a base to test new Joomla releases.

Notice: There are several possibilities in the Installation process. If you want to try all the different versions is easy to install a new Joomla website with the existing files and database. Just keep the installation folder, delete the database and the file configuration.php in the root folder and start over by pointing to   

Figure 6: Weblog
Figure 6: Weblog
Figure 7: Brochure Website
Figure 7: Brochure Website
Figure 8: Default example data
Figure 8: Default example data
Figure 9: Learn Joomla data
Figure 9: Learn Joomla data
Figure 10: Test Joomla data
Figure 10: Test Joomla data

Depending on your needs and your knowledge, you should try the different sample data sets.
Unfortunately it’s not possible to switch between the different sample data sets after the installation is finished.
It’s also possible to install Joomla without any sample data. The “empty Joomla” is a good start for your website if you already know how to use Joomla.
I’m choosing a naked Joomla without any sample data as a base for the next chapters.
You’ll be able to understand and follow the chapters without of the pre-installed sample data.
So choose the sample data you want to use and click the Install button. Joomla creates the database and configures the site for you (Figure 11).

Figure 11: Joomla! is now installed
Figure 11: Joomla! is now installed

For security reasons, it’s necessary to remove the installation folder by clicking the Remove installation folder button … BUT WAIT … there is something really nice on the right side of Figure 11.

Joomla in your language

At this stage of the installation you have the possibility to install extra languages. If you plan to have your website in another language than English, click the Extra steps: Install languages button to install one or more additional languages (Figure 12).

Notice: THIS IS AN OPTIONAL EXTRA STEP! It’s not necessary to decide now on the language issue, it is possible to do it later. If you just want to play around with Joomla and you understand English, do it in English and use just one language – it’s easier for beginners. If you are a bit more advanced, start with localization in two or three language. Life gets much easier if you understand these languages!
Multilingual websites are the most advanced topic and it’s more about workflow and how to translate the content pieces of the site. So that should be your third step.  

Figure 12: Install Language packages
Figure 12: Install Language packages

Choose the desired languages from the list, in my case i choose Chinese and Russian. Then you have to decide which language is the default language for your website and your administration interface (Figure 13).

The next question is whether you want to active the Joomla! multilingual feature.
There is a big difference between the “simple” localization and the “more advanced” multilingual behaviour.

  • Localization: Localization in our case means that the website is in a different language than English, for example French. In a country like France, most websites are in French because most of the people that live in France speak French. In Switzerland the situation is different. People speak German, French or Italian. Same situation in countries with more than one official language. To create a pure “one language, different to English” site you can choose the NO for the Activate the multilingual feature parameter (localisation).
  • Multilingual website: A multilingual website means offer your website in more than one language. You translate your content for each language you are offering. One of these languages is the default language which is shown, when a visitor visits your site for the first time.
    If you want to start with a multilingual website, you can choose YES and the multilingual features of Joomla will be activated.
Figure 13: Choose default language
Figure 13: Choose default language

Congratulations! Joomla! is now installed!

For security reasons, it’s necessary to remove the installation folder by clicking the Remove installation folder button. After the removal of the installation folder it is possible to view the site and to enter the administration area (/administrator). In my case the site looks like in Figure 14.

Figure 14: Joomla Website without sample data
Figure 14: Joomla Website without sample data

The Joomla control panel can be accessed by pointing to

http://your_domain.tld/administrator

A login screen appears (Figure 15) and after a successful login you’ll see the administration area (Figure 16).

Figure 15: Login Screen
Figure 15: Login Screen
Figure 16: Control Panel
Figure 16: Control Panel

 

 

1. What is Joomla?

As promised last week (Iron Blogger & Joomla) I’ll start to write more about Joomla! The next articles are the chapters of the book I wrote in January 2016 for the upcoming Version 3.5.

Why should I get in contact with Joomla! and what is it all about.

Joomla! is a free system for creating websites. It is an open source project, which, like most open source projects, is constantly in motion. It has been extremely successful for ten years now and is popular with millions of users worldwide. It is easy to install, easy to manage, easy to enhance and very reliable. More and more people around the globe are able to make a living by using  Joomla.

History

The word Joomla! is a derivative of the word Jumla from the African language Swahili and means “all together”. The project Joomla! is the result of a heated discussion between the Mambo Foundation, which was founded in August 2005, and its then-development team. Joomla! is a development of the successful system Mambo. Today Joomla! is used all over the world to power websites of all shapes and sizes. The Joomla! team has organised and reorganised itself throughout the last 10 years to better meet the user demands.

Joomla! Version Strategy

The version strategy of Joomla! changed over the years. Today Joomla! versions numbers are spared by dots: [major].[minor].[patch]. For example, Joomla! 3.5.0 has a major number of 3, a minor number of 5 and a patch number of 0.

  • Major release (3):
    A release which increments the major number has a predictable end of life date of two years. After each minor version the two year phase starts again. A major release indicates a break in backward compatibility.
  • Minor release (5).
    A release which increments minor number resets the two years lifetime of the major release and indicates the addition of new features or a significant change to existing features.
  • Patch release (0):
    A release which increments the patch number has no influence on the end of life date and indicates that bugs have been fixed.

The complete changes in the Joomla! 3.x series can be seen at the projects website

The smart way of Joomla

The Joomla! Project is different from other projects like Drupal or WordPress. The Joomla! project is not backed a company. The only entity that serves the financial and legal interests of the Joomla! project is Open Source Matters, a not-for-profit organisation.

It is possible to build nearly every website you can imagine using Joomla! on your own with your own knowledge spending nothing but your time, but it’s possible too to download extensions like shopping carts to build your desired website in a much shorter time. The existence of this sustainable, flexible and very diverse network of service providers based on a free and open source foundation is unique and an opportunity to every person in the world to use Joomla! as a consumer and/or a producer.

Thousands of companies around the world are developing extensions for Joomla! which you can download in a kind of app store, the Joomla! Extensions Directory. There are free and paid extensions.

Additionally the use of the Joomla! extension directory is free of charge, so the Joomla! project is the base of a vibrant community of consumers and producers of smart software.

This mindset leads to an interesting community of people, involved in the project and who are working somehow together on the project. It is always possible to contribute to the project in the way you are able and willing to.

Websites made with Joomla

All kinds of dynamic websites can be created with Joomla. These websites consists of web pages containing content such as text, images, video and audio. The pages changes or customises themselves frequently and automatically, based on certain criteria. Take the front page as an example. Usually it displays the newest articles automatically on top.
As all the sites in the world wide web are based on the same principles websites can be roughly divided in

Weblogs

A blog is a discussion or informational site consisting of articles (posts, blog entries). The most recent articles appears first.

This is an example from Brasil (Figure 1)

Figure 1: blogdopaz.com.br
Figure 1: blogdopaz.com.br

The Eiffel Tower

The Eiffel Tower is a wrought iron lattice tower on the Champ de Mars in Paris, France. It is named after the engineer Gustave Eiffel, whose company designed and built the tower. Today they are using Joomla! (Figure 2).

Figure 2: www.toureiffel.paris
Figure 2: www.toureiffel.paris

Brochure websites

A brochure website include information about a company and its products and services through text, photos, animations, audio/video and interactive menus and navigation (Figure 3)

Figure 3: solesolutions.no
Figure 3: solesolutions.no

Electronic commerce sites

A site offering goods and services for online sale and enabling online transactions for such sales (Figure 4).

Figure 5: lola-barcelona.com
Figure4: lola-barcelona.com

Gallery websites

A website designed specifically for use as a Gallery, these may be an art gallery or photo gallery and of commercial or noncommercial nature (Figure 5).

Figure 6: www.mb-photography.com
Figure 5: www.mb-photography.com

Government sites

More than 3,000 government websites around the world are built with Joomla! (Figure 6).

Figure 7: joomlagov.info
Figure 6: joomlagov.info

News sites

Similar to an information site, but dedicated to dispensing news, politics, and commentary (Figure 7).

Figure 7: magazine.joomla.org
Figure 7: magazine.joomla.org

Personal websites

Websites about an individual or a small group that contains information or any content that the individual wishes to include (Figure 8).

Figure 8: seanoshea.com.au
Figure 8: seanoshea.com.au

Cars

Peugeot is a French cars brand, part of PSA Peugeot Citroën … and they are using Joomla! (Figure 9).

Figure 9: peugeot.com
Figure 9: peugeot.com

1,000,000,000 websites

Did you ever ask yourself for the total number of Websites? There are a lot, but nobody knows the exact answer to that question.

As you may have noticed, most of the example sites are not the big fishes in the world wide web but they fulfil the needs of their creators and their clients. This does not mean, that Joomla is only useful for smaller websites, it just means that most of the websites are made with limited resources on time and budget and for that reason people often build them with open source systems like Joomla, WordPress and Drupal.
 Bigger websites like Facebook, Flickr, YouTube, Google, Apple, or Microsoft are usually not using one open source content management system for their websites. These companies usually have thousands of developers that create often hundred of websites by selecting and combining all the ideas and solutions available on the market. It is usually not about the technique, it’s more about business models and ideas.

Amateurs vs. Professionals

The above listed websites are created by people that I want to divide in amateurs and professionals.

  • Amateurs are trying to get around. They usually do not want to know one’s stuff, they are happy if succeeded.
  • Professionals try to get to the ground of what they are doing to be able to provide solutions which can be optimised over time. They try to transfer knowledge to strengthen others and build their business around the topic.

For Joomla it doesn’t matter whether you are an amateur or a professional. Both can deal with Joomla and often amateurs become professionals over time and professionals start to get more involved to make Joomla CMS and Framework better and better.
 Time for the first and the last advice in this book!

“Ignore people talking about what you have to do. Focus on moving toward what you like to do instead.”

What are the common parts in all these websites?

Even if the listed example websites are all very different, they have a few things in common:

  • they are displaying content (text, images, video, audio)
  • they have individual designs, layouts and colours. Individual doesn’t mean perfect or tasteful or artistic. It just means “individual” 🙂
  • visitors can interact in some ways with the site. Sometimes they have to create a user account in advance
  • the common static words are available in different languages, sometimes the content too.

Joomla is the glue

All these websites are based on the ideas of their creators and the almost endless possibilities of the Joomla Content Management System. In this book, I want to cover the common parts of all these websites and some examples of paid and free services to enhance the Joomla core distribution. You’ll be able to create a quite nice looking website on your own after you have read the next chapters.

And it’s up to you, whether you do it in the amateur or in the professional way 🙂


Next: 2. A fresh Joomla Installation

Iron Blogger & Joomla!

Last week, David Opati Aswani visited us here in Fitou, France. He is doing a lot for the Joomla project in East Africa and I met him for the first time in Bangalore, India at JWC15 (Joomla – A Social Movement In Tech Industry?). He invited me to CMSSummit 2016 in Kampala, Uganda and I enjoyed every minute. Then it happened that Jandbeyond 2016 took place in Barcelona, Spain (200km from the place where I live). Unfortunately, it was not possible for me to attend, so I was happy that David decided to visit us in our small village. We spend a few days together and it was funny, interesting, inspiring, motivating, encouraging and sometimes a bit sad, especially during a traffic stop of the Spanish police. They carried machine guns and stopped our car at the border between France and Spain. Four policemen first searched the luggage of David, then both of us and then the car. Other policemen surrounded our car. Welcome to the “new Europe” with fresh border controls!
Luckily, the rest of the stay was without these kind of incidents.

Joomla

Even if I’m not so present at Joomladays all around the world anymore, I still use the software, write some blog posts about it (in German) and try to follow the development of the Joomla project. I noticed that the community of the Joomla project became more and more a market for extension developers and template clubs and there was and still is a lot of #jpolitics. I also noticed, that the Joomla software is still very useful, easy to install and to maintain and that it’s totally possible to make a living from using Joomla for clients and/or yourself. At #jwc15 Hung Dinh from Joomlart asked me, whether I would write again a book about Joomla if he sponsors me. I agreed and started to write but then the release of Joomla 3.5 was delayed and the project stunted.

With David I talked not much about Joomla but during his stay I noticed that

African Joomla Conference
African Joomla Conference
  • CMS Summit 2017, organized by David, Shedy and Oduor will be held in Abuja, Nigeria and they are looking for sponsors – anyone?
  • David tries to organize a JoomlaDay in Somaliland and is also looking for sponsors – anyone?
  • the “official” budget of Open Source Matters for travel costs and sponsoring of Joomla days was cut (I don’t know details).
    Update: I still don’t know details but I was told I should write “appears to be under threat” instead of cut!
  • if more people could learn to develop, contribute to core, sell extensions and services it would be a good business for the individual and a good deal too for the project. For most people, Joomla is a source of income!
  • Joomla needs “fresh ideas”, people in Joomla are often very old (me included 😉 )
  • there are other CMS’s in this world (e.g. WordPress, Drupal, PageKit, Grav, List of CMS)

Important Disclaimer: These are my thoughts and interpretations. David don’t know that I write something in my blog about these topics and at the moment he is in a plane ;).

During his stay, he took a photo of some of the books I wrote between 2002-2010 and published it on his Facebook profile.

A few of my books
A few of my books

Since the release of Joomla 2.5 I published the books by myself with the help of sponsors and offered them as a free download. People like that and still until today I receive feedback. The last book was about Joomla 3 and I wrote it in 2012 (Free PDF download).

Idea

Today I brought David to the airport in Barcelona for his flight to Kenya. On the way back I thought it might be a good idea to write again about Joomla (and beyond). The “and beyond” part is important. Joomla is a good Content Management System and with a little bit of know how it is possible to build amazing websites. The more “and beyond” you know the easier it will become to earn money with Joomla!

Iron Blogger

Since last year I’m a so called Iron blogger. Iron bloggers are publishing a blog post every week and because the language I know best is German, I joined a German Iron Blogger group (Ich werde Iron Blogger :)). The basic idea is very simple. Everyone who participates needs a blog (CMS doesn’t matter). He or she has to write one blog entry per week. All the blog posts will be aggregated.
From now on, I’ll try to write about Joomla (of course in English).

If you like the idea, join me, become a Joomla Iron Blogger too and tell me about your decision in a comment 🙂

A good topic for the first entry could be

  • where do I get information about Joomla?
  • what means “and beyond”?
  • some websites made with Joomla!
  • how to publish content in Joomla, especially images?
  • how to create a template?
  • how to develop a simple component?
  • how to develop the iron blogger component 🙂