Build web site

Build an own community web-site. A samurai path. A tutorial on Drupal

Tuesday, November 29, 2005

Changing Drupal theme in a few clicks

Before we make further upgrades to the site, let's make it look a bit prettier. Serious theme selection and its adjustments will be covered later, but the default Drupal theme is too boring.

Go to the Administer->Settings, enable the themes you like and set the default one - pushbutton in the SymbianExample case.

That's it. From now on, every user can visit his "my account"->Edit and choose one of the allowed templates.

One more step for today will be adding one link to the site - the link to this very blog. A good place for it is one of the "standard" theme links. I chose to change the "Secondary link".
To change it click "edit secondary links" at the top of the site.


Add a new link and save the configuration. Note, that img_assist module we added the last time added his button under every textarea field. So theoretically you could add an image to the link text.


Voila, link changed and right in the site header, an accidental visitor can go to this blog, explaining how to create a similar site for yourself.


Next time we will be adding the source code highlighting feature to allow posting the easy-readable source code.

Stay tuned

Sunday, November 27, 2005

Drupal: Integrating the "inline" image upload feature

Below are the detailed insctructions on how to enable adding image to the Drupal article while typing it. Just like you can do at the Google Blogger. In the future posts, I will show how to integrate it into the WYSIWYG editor, to make the posting process look almost like the Blogger's one.

The Goal

The final target for the today's excersise will be to enable the following kind of posting experience:
1. User starts typing his article
2. Somewhere in the middle he decides to include the image into the body of the post.
3. User clicks the "Add image" button, uploads new or selects the existing the image and
4. Image code is added to the post, can be seen in the post preview and after submitting the post, of course

The Solution

There is a special module that can perform this task - img_assist. It automatically adds the special icon under each textarea element (e.g. under the post body) that opens a separate window for image uploading just like Blogger does. For uploading it requires another Drupal module to be installed - image. Technically speaking you can use some other uploading module, but image workds for sure and we'll use it
So the plan is to:
1. Install the image module
2. Install the img_assist module
3. Enjoy seemless image uploading and allow everybody trying it

Installing the image module

It is simpler to do, than to tell about
1. Download the latest version of the module. At the moment it is version 4.6.0 from the 15/04/2005 (Direct link to the archive)
2. Unpack it and copy the whole 'image' directory to the modules directory of your Drupal site.


3. Go to your site's administer->modules page and enable it


4. The 'image galleries' menu item will be created in your aminister menu. Open it. You don't really have to create any gallery, but when the menu is first opened, image storage directories will be created.


That's it, after you clicked the 'Save configuration' button proceed to the img_assist installation
5. To allow users actually upload image (instead of forcing to use the existing ones) visit the administer->access control and grant the 'create images" permission to the authenticated users

Installing the img_assist module

1. Download the latest version of the module. At the moment it is version 4.6.0 from the 15/04/2005 (Direct link to the archive)
2. Unpack it and copy the whole img_assist directory to the modules directory of your Drupal site


3. Go to your site's administer->modules and enable it


4. Upload the img_assist.mysql supplied with the module to the your site DB. You can do it using the phpMyAdmin just like we did with the main Drupal database
5. Go to administer->input format and enable the image uploading in all or at least the default input format



Try the results yourself

That's it. You can play with the modules settings to create image galleries or set the thumbnails size, but the minimal set of work is done, your users can start creating content with the images attached. While the site is in the development mode, you are welcome to try it yourself. Create an account and add a test post with the image attached
1. When typing the post text, you'll notice a special item under the text body area:


2. Click it, an image selection window will be opened. Select an existing icon or upload a new one (Please, upload something small, up to 150Kb).


3. Click "Insert image" and the image code will be added to your post.
Note, that you should not select 'html' option. If you did it, usual html ing tag will be used and by default, it will be cut by the Drupal filters. You would need to do some tuning to allow it. Please tell, if you would like me to post a detailed instructions about it




4. Submit the post and enjoy seeing it on the front page. Image thumbnail is clickable. Click it to see the full-size image


Now you know how to enable the inline image uploading. Still there are some uncovered aspects of it. For example, I'd like know how to simplify the image uploading dialog by removing the "Show code"- "html" option. If you know how make tune the image uploading better, please, share the information. Just comment to this post, and I'll try implementing the solution and will carefully document each and every step for novices.

Meanwhile, the next step for the Symbian Example site, will be the addition of the "source code highlighting" feature. Stay tuned.

Tuesday, November 22, 2005

Try Drupal posting interface yourself


I gave everybody rights to post on www.symbianexample.com. Just create an account and check the default Drupal "create content" interface. Not very attractive, isn't it? And no option to upload pictures.

Now, when everybody can see changes in real time, next step is to try adding the image uploading feature.

Monday, November 21, 2005

How to install Drupal CMS in 3 simple steps

Update: Try posting to the default Drupal site yourself

A step by step guide on Drupal CMS installation to a cheap hosting.

My www.symbianexample.com site is hosted on one of the best cheap hosting services T35.com. Featurewise it's provides every basic feature you can expect from just a "good cheap hosting": Apache, PHP, MySQL, CPanel, SSH and FTP access to your files - this is all Drupal needs to work (SSH is optional, but simplifies the installation).

The Drupal installation consists of three steps:
1. Download files
2. Create and initialize the database
3. Set up the configuration files

1. Download files

First of all we need a place to download to, some directory possibly linked to one of our domain names.
I have a www.symbianexample.com domain name linked to the symbianexample subdirectory of my account root directory.
We need to get Drupal archive from http://drupal.org/files/projects/drupal-4.6.3.tar.gz and unpack it into the target directory. We could just unpack everything to the local PC and transfer files to the web server via FTP. It will work, but faster and simpler is to download files directly t your host.

Here's how I did it.
a) Start Putty SSH client and log in to your account using the address from your hoster. Usually it's just your domain name

b) After login, navigate to the public_html. By the way note the symbianexample directory there. It's empty at the moment

c) Download files from drupal.org
wget http://drupal.org/files/projects/drupal-4.6.3.tar.gz


d) Unpack files to the directory drupal-4.6.3
tar -zxvf drupal-4.6.3.tar.gz


e) Move unpacked files to the target directory
mv drupal-4.6.3/* drupal-4.6.3/.htaccess ./symbianexample

Drupal files are now in the symbianexample directory

2. Create and initialize the database

Drupal stores its content in the database, that can be MySQL - the most frequent option in the hosting packages.

a) Create the database
The easiest way of creating the DB is via CPanel.
Log into it using the hoster's instructions. In T35's case you just open yourdomain.com:2082 in the browser.
E.g. http://www.symbianexample.com:2082

There go to Server -> MySQL Databases and create database sanktrum_symbian, user with the same name sanktrum_symbian and grant the user all the rights on the just created database

sanktrum is my account name and CPanel automatically adds it to the DB name, you will have a different prefix.

b) Load initial content into DB
In the CPanel go to Server -> PhpMyAdmin and select just created sanktrum_symbian from the drop-down box on the left. My DB shows (55) existing tables, because I uploaded the data already. Yours just created DB will show 0.


After selecting the DB, go to the SQL tab and upload the database.mysql file, supplied with the Drupal archive. You can can get it from the database directory of the Drupal installation (just FTP it to the local drive)
Hit Go and voila, DB is up and running

3. Configure the site

The last installation item is the simplest one.
Go to the sites/default directory and edit the configuration.php
You need to edit only two lines that specify the domain and database used. Replace the DB name, user name and password with the ones created on the step 2. And enter your domain name, of course.
$db_url = 'mysql://sanktrum_symbian:YourSuperPassword@localhost/sanktrum_symbian';
$base_url = 'http://www.symbianexample.com';

Create the administrator account

After the installation is completed, log into the just created site and do it fast. The first who creates an account, get's the administrator rights :)


That's it. Your Druapl installation is up and running, ready for the extra configurations via the Web interface. As I told already, the next thing I am going to do is to research the ways of uploading the image to the Drupal article while typing the article just like you can upload the images to Blogger. I am going to give everybody rights to post on the site so, that everybody could try and evaluate the possible solutions.

To be continued, stay tuned

Tuesday, November 15, 2005

Feasibility of Drupal as a source code repository

Update on Nov 21: I installed the Drupal and documented it in a very detailed way with a lot of pictures. So, whoever needs a "getting started" tutorial can use this installation guide

This time I want to try building the web-site on Drupal - a known open-source site platform with a big focus on community-related features. Drupal seems to satisfy my mandatory requirements for non-modifiable code repository:

  1. Everybody should be able to post code examples
    You can tune rights of anonyms even more. E.g. allow them to make comments only for particular publication types
  2. And should be able to attach zip files
    Looks like it is quite possible
  3. And use images in the articles
    There is no out-of-the-box way to use Blogger-like upload and immediately see feature. However there are image galleries that you can use (suitable for technical authors) and at least some user friendly solutions
  4. And the code can be highlighted just as in any decent source code editor
    Easily possible
  5. And articles should be discussable in the forum or right under the article
    You can see it at any Drupal site. For example, on drupal.org
The only mandatory feature that might be tricky is seamless uploading of images to the article texts, but it seems to have real solutions.
As extra advantages Drupal proposes user-friendly URLs, full control on categories, blogging API support and more.

Permission is granted. As soon as possible I'll start the Drupal trials. And in the spirit of iterative and agile software development I am going start with the most critical part - figuring out what is the best way of adding image uploading for article authors.

Technorati tags:

Saturday, November 12, 2005

Community site

I want to build a community web site - a repository of the source code written for the Symbian operating system. The idea is, that when a person needs to see how this or that feature is actually used, he could go to the community site and search for commented, explained and compilable source code.

Whenever I personally need to work with a new feature, I always search for code examples and tutorials. The portal I have in mind is supposed to bring things to the next level - all (or at least most of) the code snipplets will be wrapped up into ready to run projects, that everybody can step through in a debugger - the best learning technique I know.

I need the following features to build the system:

  1. Everybody should be able to post code examples
  2. And should be able to attach zip files
  3. And use images in the article test
  4. And the code can be highlighted just as in any decent source code editor
  5. And articles should be discussable in the forum or right under the article
And also some general portal stuff, like ability to move articles between categories, and having an admin account, that should approve articles before the publishing.
Technorati tags:

Start a web-site

A week ago the hoster of my www.symbianexample.com had a huge hardware crash. They managed to restore everything, but several MySQL databases. Unfortunately (or should I say fortunately?) symbianexample database was lost and several articles already published there are lost. I was lucky to have local copies on my PC.

However, as a matter of fact, I was already disappointed with the Mambo platform (nowadays called Joomla) I was running the site on. I didn't allow for all the features I needed, and it was unbeleivaly difficult to get a free template, that I would like. I am not a designer myself and prefer modifying the existing templates, rather than creating one from scratch.

So I decided to build a new version of the site on another platform.

Technorati tags: