SimpleNav: Custom course format - Part 1

THE GOAL
I recently worked for a client in the food service that wanted users to view a quick overview of their company and complete a couple training exercises. So we setup a Moodle course with about 10 activities and 5 videos in the course the student had to complete. The intended time frame for completion was about 10 minutes or less.

The client asked for a streamlined user experience, eliminating confirmation screens and backtracking to the main course page. So in effect, the user could flow seamlessly between each consecutive activity in the course.

THE SOLUTION
The easiest solution for a new navigation between activities would be a new, custom course format. This would allow me to make custom changes without messing with core Moodle code. So the first thing I did was to build my new course format off of a classic:  the Topics format.

1. Go into the moodle source code to:   moodle/course/format/
2. Copy the "topics" folder and rename it to something else. I chose to name mine "simplenav" 

Now the fun part: re-naming everything. 
Open up the course format folder you just renamed. Let's start at the top and work our way down.

Lang Folder

1. Open the lang folder and navigate to the only file in there:  format_(formatname).php. Rename this file using the new name you picked out like this:  format_simplenav.php
2.  Open the file with a text editor, like Notepad++
3. Let's rename some of the strings in there, so it matches our "simplenav" plugin. Here is an example:
             $string['pluginname'] = 'Simple Navigation format';          $string['page-course-view-simplenav'] = 'Any course main page in simplenav format';          $string['page-course-view-simplenav-x'] = 'Any course page in simplenav format';

format.php

1. Open this file in a text editor. You only need to change two lines. 
2. Search for the keyword "topics," since that is the format name we'll be replacing.
3. Near the end of the file, find these line and update it:
1. $renderer = $PAGE->get_renderer('format_simplenav'); 
2. $PAGE->requires->js('/course/format/simplenav/format.js');  

lib.php

1.  Open this file in a text editor. Search for the keyword "topics"
2. The first change is the class name, at the top of the file:
1. class format_simplenav extends format_base {  
3. Continue to search and replace.

renderer.php
This is the same process. Make sure you rename the class at the top of the file:
             class format_simplenav_renderer extends format_section_renderer_base {    

css.php
Same thing again. Re-name all the css classes from "topics" to "simple nav like this:
             .course-content ul.simplenav {margin:0;}             .course-content ul.simplenav li.section {list-style: none;margin:0 0 5px 0;padding:0;}             .course-content ul.simplenav li.section .content {margin:0 40px;}


version.php
You only need to change the last line:.
$plugin->component = 'format_simplenav';  
INSTALLATION 
Now that everything has been copied and renamed properly, it can be installed within moodle. 

1. Login to your site as the Administrator. You should be automatically redirected to a new page, where you must install updates within your site. 
1. If you are not automatically redirected, go to the Site Administration block, and click on "Notifications."
2. You will be redirected to a page to update your site – the new “simplenav” course format will appear. Update your site to move forward. 

CHANGES TO COURSE ADMINISTRATION

We need to change the settings of our course to enable our new format.

1.  Login to the Moodle website as an Administrator or Teacher.
2. Go into your course and go to “Course Administration > Edit Settings.”
3. Open up the “Course Format” section. If the simplenav format installed correctly, you’ll have a new option called “Simple Navigation.” Click on that one

YOU'RE READY!
Everything is ready to start customizing and using your new, custom course format! In the next blog post, we'll talk about the changes we need to make to have a linear activity flow.

New posts, plugins and moodle updates

I wanted to let everyone that follows this blog know that new content is coming. I'm been working on Moodle as a freelance developer for over the last six years and I'm still learning a lot about the platform with every new release that comes out. But now that I have the time, I will be writing new posts on other customizations I created:

• Use the category and course hierarchy to change Moodle into a client web portal
• Attaching themes to course categories
• Add custom php pages to Moodle
• New custom blocks
• Custom graphs and charts based on HTML5
• Custom course formats
• Browse through activities without all the confirmation screens
• Recreate the Moodle course
• To have its own front page and navigation style
• Sync Tools
• Allow students to upload text files and parse the data for Moodle

The list could be longer, but these are some of the things I'll begin to tackle in my blog. I'm also considering to make these into public plugins that can be downloaded from my website. The price hasn't been decided yet, but I'd like to make them free if I can get some friendly donations coming in first. That would pay for the development and upkeep. 

For now if you have any questions, leave a comment below or visit my website for more Moodle examples:   

www.arcinteractive.net

Change the document root

I am using a dedicated CentOS server, with access to WHM and cPanel. 
What I want to do is unload my moodle code into a nice, organized file structure within my "File Manager" on cPanel." The end result should be that I can put my moodle code here:

public_html/moodle
public_html_moodledata

And still reference my site like this:  www.mysite.com 
(instead of normally having to extend the url like:   www.mysite.com/moodle/)

Since I have root ssh access on my server, I am going to edit where the documentroot points to. 

Login to SSH
Since I'm using a windows machine to access my server, I went ahead and downloaded PuTTY, a free ssh client. 

1. I opened up putty and input my server's IP address. 
2. I logged in as the root user. 
1. If logged in as another user, use the command su -  command to enter root password and gain root access.
3. Now we need to open and edit your domain file. Again, you can only do this as root user. Type in the following command:   vi /var/cpanel/userdata/USERNAME/DOMAINNAME
1. An example would be:   vi /var/cpanel/userdata/testuser/mysite.com
4. Now the file should be open within PuTTY. Click the "i" key to start editing mode, and use arrows to navigate to the section of text called "documentroot."
5. Change that text to say:     documentroot: /home/testuser/public_html/moodle
6. Rebuild the Apache conf and restart Apache. You can do this through SSH:
1. /scripts/rebuildhttpdconf
2. service httpd restart
7. Or through the WHM panel. Type in the search bar "Apache Config". Go to the page.Save and rebuild.
8. The change will be immediate. Simply clear your browser cache and force refresh the page!

I used this blog guide as a reference:

http://blog.servint.net/2012/03/30/the-tech-bench-changing-a-document-root-in-cpanel/

Install memcache on moodle 2.4

So...this took me a stupidly long time to wrap my head around it. But I think I finally installed everything correctly. Even though Moodle 2.4+ supports caching through memcache, you first need to install it on your server.

ON YOUR SERVER
Hopefully you will be using WHM manager to have a nice interface when interacting with your server.

1)  Login to your WHM panel as the root user
2)  Go to "Easy Apache". Click through the screens until you get to the php setup page.
3)  Scroll down so you will see the "See Exhaustive Options" button. Click it.
4)  Now there are more options on the page. Simply search the page until you find "memcache." Check the option and save your configuration.
5)  Now you need to go into "Software -> Module Installers -> PHP Pecl". Click on the manage button so you option up the new options screen.
6)  Now you should see the area on the screen that says "Install php Pecl module" and an empty text box. Inside the box you can type "memcache" and/or "memcached".
7)  Click the "Install Now" button.
8)  Once the installation process is complete, you will need to restart apache. (Restart services -> HTTP (apache))

ON MOODLE
1)  Login to moodle as the administrator
2)  Go to "Site Administration -> Plugins ->Caching -> Configuration."
3)  You will come to a new page where you will see the caching options listed inside the first table on the top of the page. Inside the row that says "memcache", you should now see a new link in the right-most column that says "Add Instance." Click the link
4)  You will come to a new page where you configure which server should be memcached. In my case, it's the same server that I am hosting on.
5)  Name your file and enter the domain of your server like:   mydomain.com (you don't need the www in front).
        a)  I also needed to add the default port number to make this work. mydomain.com:11211
6)  Save your changes.
7)  Now you need to go into "Plugins ->Caching ->CacheStores ->Memcache." Enter the same domain like step #5 (mydomain.com:11211).
8)  Save your changes.
9)  On the "Plugins ->Caching -> Configuration,"  you will need to modify the other settings within those tables and map them to your new memcache store. Just like the right-most column that said "Add instance", the right-most column in the other tables are links. You need to "Edit" some of those columns and activiate your new memcache store to start loading things. Like the strings.
10)  Finally, you should go into "Plugins ->Caching ->Test Performance." The "result" column should say "tested" next to the memcache row. If it doesn't you didn't install it properly.

Easily find the course id for any page

Here is a nice code snippet to find the course id of a page (assuming it's actually related to a course).

global $PAGE;

$context = $PAGE->context;
$coursecontext = $context->get_course_context();

// current course id
$courseid = $coursecontext->instanceid;

Tada! Came across this on stackoverflow today and thought I would keep a record of it for myself :)

Define a new font-face using $CFG->wwwroot

It's been several times now where I defined a new font-face type with my CSS file using an absolute url path to my website. And of course, that doesn't work if I want to port my code to another server. Or even put it on my local machine.

The best way to do this is to point my css to use the $CFG->wwwroot location when including my font files. This way, you only have to modify the config.php (one file, instead of many) to change your site url.

The way to do this is:

1)  Inside of your own theme, you should have a lib.php file. In my case, this is the file structure:  theme/mytheme/lib.php

2)  I used this forum post as inspiration, but I'll also give a quick recap down below: https://moodle.org/mod/forum/discuss.php?d=220495

3)  Inside of lib.php, create a new function:
<?php

function mytheme_process_css($css, $theme) {
    $css = mytheme_set_fontwww($css);
    return $css;
}

function mytheme_set_fontwww($css) {
    global $CFG;
    
    $tag = 'setting:fontwww';
    $css = str_replace($tag, $CFG->wwwroot . '/theme/mytheme/fonts/', $css);
    return $css;
}
?>

That part that is highlighted in yellow above, make sure that it is the location of where your font files are located. (So an extra step would be making sure you put your font files on the server to begin with :)

Next, you need to modify your css file. For myself, I defined my new font inside of theme/mytheme/style/core.css.

@font-face
{
    font-family: ArchitectsDaughter;
    src: url('setting:fontwwwArchitectsDaughter.eot'); /* IE8-9 */
    src: url('setting:fontwwwArchitectsDaughter.eot?#iefix') format('embedded-opentype'),  
         url('setting:fontwwwArchitectsDaughter.ttf') format('truetype');

}

Notice that the parts I highlighted above are the same text as the "$tag" variable I assigned in the previous functions. Also, my code has multiple font files to suit both Internet Explorer and other browsers.

Make sure to refresh the theme caches on your server and/or computer. After that, you should see your new font appear.

Setting up cPanel account from WHM

Setting up a server with the WHM panel is pretty easy, since most of that is done for you by your hosting company. But it's not so intuative to setup the cPanel account itself (for the first time installation). So here are some instructions:

Here is a video: http://www.namecheap.com/support/knowledgebase/article.aspx/1091/97/web-hosting-tutorials-how-to-create-a-cpanel-account-in-whm

First you need a domain:
1) Purchase one from godaddy.

Or create a subdomain:
http://support.godaddy.com/help/article/4080/managing-a-domain-names-subdomains?pc_split_value=1&countrysite=in
1) From Account manager, click on the "Domains" section to open it up. Select the domain you want and click on the "Launch" button.
2) Click on the "DNS Zone File" tab
3) Click on the "Edit" button.
4) Now you should be inside the DNS Manager section. At the very top of the page, there should be a tool bar with icons. Click on the "Add Record" icon.
5)  From the drop-down box, choose the option called "A (Host)."
6)  Inside the box called "Host Name", enter the subdomain you want to use. (For example, dev.mydomain.com)
7)  Enter the IP it should point to.
8)  Click Okay. Now you will return to the DNS Manager page.
9)  Remember to now click on the "SAVE FILE" button at the top of the page.
10)  You'll probably need to wait a couple hours before it takes affect.

Then setup WHM:
1)  Login to your WHM panel and go to:   Home -> Account Functions -> Add new account
2)  Fill in all the information with your domain.
3)  Create a default package with manual settings. Leave everything as is.
4)  Click save!

Now you have an account that will access cPanel. From the WHM manager, you can go to: Accouts -> List Accounts. Then click on the cPanel icon to login.

Or you can login to your cPanel directly: http://myip:2083
===========================

Now setup a database in cPanel:
1) Inside of cPanel, go to the section called "msqyl databases". You need to create a new database with collation utf8_unicode. Remember the name.
2)  Create a new user for your database
3)  Finally assign the user you just made, to the new database you just created. Give the user all privileges.

Additions to moodle install:
http://docs.moodle.org/24/en/CentOS_Linux_installation
http://docs.moodle.org/24/en/PHP
- Enabled XCache for php
- Enable IonCube Loader if necessary for custom licensing tools
- Make sure you have mysqli installed for the database (done through WHM->software->easyapache)
- Make sure you have curl installed

Now to setup moodle inside of cpanel:
1) Go to the Filemanager.
2) Create a folder named "moodledata" at the same level as the "public_html" item. Or simply remember to install it at a higher level than the moodle code. It needs to be one level higher in a folder hierarchy.
3) Go inside the "public_html" item. Upload a zip file of the latest moodle release. Upack the zip file. (Note: the zip file might extract to a folder called "moodle." For our purposes, make sure that all files are not within a separate folder, but extracted directly inside of "public_html."
4) Access the website via url to start the moodle installation process.

During installation:
1)  Make sure the "unix socket" check box is on.
2)  Make sure your database was set with the utf8_unicode option

After installation:
1)  Make sure you set the cron for the moodle site and server.
http://docs.moodle.org/24/en/Cron_with_web_hosting_services
2)  Go into cPanel for your server. Scroll down to the "Advanced" section and click on the "Cron Jobs" button.
3)  Choose the timing for your cron job (normal is to every 30 minutes)
4)  Enter the cron command like this example:  /usr/local/bin/php -q /home/username/public_html/moodle/admin/cli/cron.php