It seems like you are using an ad blocker. To enhance your experience and support our website, please consider:

  1. Signing in to disable ads on our site.
  2. Sign up if you don't have an account yet.
  3. Or, disable your ad blocker by doing this:
    • Click on the ad blocker icon in your browser's toolbar.
    • Select "Pause on this site" or a similar option for lancecourse.com.

The full story behind the new version of ITutorage

zooboole

Published By zooboole

ITutorage.com is getting a new face. Behind that face reside many decisions and little web development experience. we would like, in this post, to share with you that experience and the process we used to complete the work. we also think that could be of some help to those who are in quest of development workflows or sometimes find it hard to decide on a full project.

Note, this might not be the perfect method or solution, but that is what we used to complete the job.

we recently had that feeling of rebuilding the entire website. we took many days to think of how we could re-factor the web since we had just finished reviewing it then. we made some surveys with friends and users online to get their opinions about the actual being of the site, and we received some good feedback that made us finally say we have to do it and do it from scratch.

Reasons why we had to re-factor the entire web

A new website doesn't stop at just changing the interface, rather it brings more content, valuable and consistent content. There are many reasons that pushed us to that. In two lines we can just say:

  • The site was not working
  • We wanted the site to work for real and look more professional

Let's go deeply into these two points to show you what we mean by working. With the previous version:

  • It was hard to add or edit tutorials. Editing a tutorial was re-writing it because the WYSIWYG editor was not really what we can call a cool tool.
  • Tutorials were written in a rush and full of errors,
  • tutorials were not updated,
  • we could not show demos of tutorials,
  • Tutorials are not many and they are not added frequently,
  • Members could not use their profile or even signing in is sometimes impossible,
  • The design was catastrophic. I remember a friend was telling me, "Why can't you just re-do it, it is lame". Lol; funny but serious,
  • The Google Analytic Bounce rate is almost 100%,
  • The traffic was desert,
  • The forum was altogether empty,
  • The core php MVC model we used was copied and bugs all the time. Time to do ours,
  • etc.

There are a lot of reasons and someone could just say: the site is not working.

So, we really wanted to make the site work, and our main problem was to add tutorials properly so our users would feel comfortable reading them, and we should be able to edit them at any time.

Preparation: Equipment and workflow

Our decision is made, We're going to do it over again.

Technologies to use

We first thought of using a CMS as some giants(SmashingMagazine or css-tricks) do. So We went to see WordPress and to be honest that was our first time installing WordPress for serious use.

WordPress has all the features we need for our goal except a design, and we didn't want to download or buy a template because we believe, it is never going to fit our desire. We need something we can fully control and bring changes and updates at any time. The good news there was that we could create our own WordPress Theme; wow, we had already made our new layout with full CSS and HTML.

So, for two to three weeks we trained ourselves on how to convert that design into a WordPress theme. Unfortunately, we were disappointed. WordPress is fully developed with PHP but the entire CMS is made up of pre-built functions and modules. Everything is about plugins, all their functions are already made in a particular PHP jargon that we had to learn in our PHP skills. Even in the functions.php file nothing looks like freedom space. We are not here to criticize WordPress, but that was just a bad experience for us.

We needed something we can control not something that controls us, and WordPress has nothing like that. That is our opinion maybe in another post we will discuss deeply about that.

With our experience with WordPress, we didn't want to look at Joomla anymore, since we knew it was going to look the same and we would have to waste a lot of time trying to create my own theme and plugins.

In our research we went to meet a very new CMS called <a href="http://www.octobercms.com" target="_blank>October CMS]; Eureka!

October CMS is no doubt what we were looking for. It is a perfect CMS for developers. In one night we learned how to create our own theme and integrated our existing layout to an October CMS theme. Great!

OctoberCMS gives us simple plugins for a Blog, Forum, Users, Pages, Google Analytics, Twitter, Facebook, Comments feeds, etc. It is just magic, we were very happy of that CMS and even started contributing(just a little one lol) to the work on Git Hub.

We easily learned how to create our own plugins in less than a day. Another thing we love in OctoberCMS is that it fully implements the MarkDown content edition. You can write posts, create static pages, and comments, and post in the forum using full markdown.

But our problem was that we have some needs and plugins that don't exist yet and creating them ourselves is possible but it will cost us another time and we can't guarantee security issues around it and our site has to follow the evolution of octoberCMS. Furthermore, we have Tutorials and Blog on our site; the blog plugin could not handle tutorials categories. The way we display tutorials is not the same as the way we display blog posts.

So, basically, we could not use OctoberCMS because we are not really mature in it to create all our desired functions. Maybe in the future days, we could publish some write-ups on OctoberCMS for you. And soon we are certain we will be using it even for projects bigger than phpocean.com(now lancecourse.com).

Finally, the only remaining option is to go for raw coding, and that was what we opted for.

Tools and programming languages

By opting for hard coding, we really wanted to reduce most third-party libraries to gain in speed and loading cost.

Our intention was to avoid third parties like jQuery, external fonts, etc. We actually used JQuery and Google Font, but in time we could get away from them.

So, we chose PHP for our core programming language because we use PHP and we are more used to it than any other programming language. But we required some help of some dependencies like PHP-MarkDown, PHPMailer, Html2pdf, Htmlpurifier, Font Awesome, and composer to alleviate the work.

We basically worked with sublime Text 2 as a text editor and used GitHub Desktop to track the work. And you know in any project the definition of need is the first thing to do.

Work process and steps

First things first, we had our small PHP bare-bone framework there, We got the help of our friend Matej Sima who provided us some codes from his formal php framework Vibius which helped us make ours basically full enough to do the job.

The code is ready, we knew how we wanted the site based on our experience on iTutorage, so let's get the work!

To show the detailed process, we have printed a GitHub local repository history (Please read it from bottom to top).

First history:

Second history:

Third history:

You can see that each step targets a particular functionality in the site or some set of functionalities. Mind you this is going to continue like that until the site becomes more stable.

So, what changed?

Hmm, So many many things changed starting from the name. We have added and reduced a lot of things.

  • The Logo: We changed the logo because of some copyright issues we had with the first one. It used some materials that were not ours. But that was not a problem. So we decided to have a very simple and light logo that can easily be stuck to anything and everywhere.

    It is made up of two chevrons, the opening one and the closing one, just to symbolize programming languages.

  • The name: Actually, we didn't plan that. But almost in the end, we decided to keep phpocean. You may ask me why.

    Simple. iTutorage had some kind of bad experience. It didn't attract people the way we wanted it, and that is why we decided to rebuild the site. If we have come new, let's come new altogether.

    Another reason is that the name iTutorage seems to be hard to pronounce and the meaning is hidden unlike phpocean which has its meaning straightforward.

  • Menu & categories: The menu remained the same except in the tutorials category where we changed the different tutorials categories and added the services menu.

  • Forum: The forum, in its concept, remained the same; except for the fact that the new one is fully developed and all required functionalities are developed. Now you ask questions, reply to questions, up vote or downvote topics and replies. You have notifications when somebody replies to a thread you are in. You can use the MarkDown language to post your questions and replies with ease. You can add source code or images to your posts.

  • Blog: The blog remained the same; only the display of posts changed

  • Services: Services is a new menu added to the site to display some of the services we provide besides the free tutorials. Do not hesitate to request for our services for your next project.

  • Membership: Here is where consequent changes were made. The main one that affects you directly is the premium membership.

    Basically, that account type will help you to download our source codes, download tutorials in PDF format, and get access to full courses. Read more details here about.

    Aside from that many other functions were added to facilitate the use of the site and help you manage your activities in it. Actually, there are some options(like taking quizzes, posting comments, etc) you can't access unless you are logged in. Create your account here if you are not a member yet. You can check out our get started page for more details.

  • Courses: Another new function. This is the category that will be having full courses. We are going to write full courses on some given topics. So, we can take a topic like PHP and write a full course on it from the beginning to the end.

  • Quiz: We believe in practice over theory. Every Chapter/course is going to have a quiz to help you apply what you learn. The quizzes are instantly marked. You have the chances to take the same quiz, and your grades are saved in your profile.

  • Write for us: It is fun to be part of the community, but better when you are fully part of the team. We allow you to have your say on the site. You believe you have something to share with the rest of the community, just write it down and send it to us. We will always be glad to publish your content.

Conclusion

This isn't the best story about creating a website. But we believe it was a cool experience that deserves to be shared with you.

Creating a website seems easy, and many people do promote that ideology. Note that websites are not the same. Some can easily be built with a CMS and some can't never been done with them. Creating some website from scratch may be a waste of time unless you use a CMS. Our requirements and projections forced us to create it from scratch. You may not have to follow our process, but if you do, nobody will blame you; Consider the time and resources it will consume.

It may also be useful to work from scratch if that can help you increase your experience or satisfy your curiosity. Your site is your rules.

Some all, this is the story. Your comments and ideas are welcome.