CodeIgniter 3 Tutorial 1: Download, Installation, Introduction and Welcome!

Back to CodeIgniter Tutorials

This is the first part of CodeIgniter 3 tutorials. CodeIgniter 3.0 introduced a lot of upgrades over 2.x versions of CodeIgniter. Users who wish to upgrade to CodeIgniter 3 may have to perform changes as mentioned here in the official CodeIgniter 3.0 documentation.

Here are my Tutorials for CodeIgniter:

CodeIgniter 3 Tutorials
CodeIgniter 2.2 Tutorials

This tutorial series is for new users of CodeIgniter users who wish to start with CodeIgniter 3.x. We will start with downloading Codeigniter.

CodeIgniter can be obtained from any of the two places.

  1. Official Website Here
  2. Official Github Repository Here

Lets download from the official website

Now, install XAMPP as I have explained here and also here for my CodeIgniter 2.2 Tutorials Series.

Now, once you have installed XAMPP and downloaded CodeIgniter 3, we can now start installing CodeIgniter. Follow the following steps.

  1. Assuming you installed XAMPP in D:\, go to D:\xampp\htdocs
  2. For this example, create a subfolder “tutorial” so we now have,
  3. Now, extract the contents of downloaded CodeIgniter files here.
  4. You will now have the following base structure of CodeIgniter.
  5. CodeIgniter is INSTALLED!
  6. Here is the simple explanation of all of these files and folders (You can skip if you are already familiar otehrwise, I highly recommend reading the brief descriptions below):
    1. \application\
      (108Kb, 45 Files)
      This folder contains the web application that you will develop using CodeIgniter.
    2. \system\
      (2.05MB, 202 Files)
      This folder contains the actual CodeIgniter framework. In other words, the cool stuff! It is not necessary, but it would be nice to open this folder by yourself and see how everything works behind the scenes. Also, this is the folder that is affected with each version. So yuou might be required to make changes to this folder if you ever wish to upgrade.
    3. \user_guide\
      (6.41MB, 191 Files)
      This folder contains the latest CodeIgniter documentation at the time of release of whichever version that you downloaded. It is SAFE TO DELETE this folder at the cost of losing offline official guide. I personally delete these from my projects to save size.
    4. \.gitignore
      This file tells Github to ignore the specified files and folders to be ignored when committing to a repository.
    5. \composer.json
      This file is used with composer to keep the packages up to date.
    6. \contributing.md
      Simply put, this is a readme file for “contributing to the CodeIgniter project” topic.
    7. \index.php
      This file contains variables that control how your application behaves. For example,

      1. Error Reporting levels
      2. \system\ folder name (which it allows to be changed)
      3. Want to know how to change \application\ folder name? This file does it!
      4. Want to move the \application\view\ folder out of the \application\ folder? index.php does it!
      5. Override application routing.
      6. Meddle with the config parameters.

 

And some more parameters which should not be touched and if you did, then God help you.

 

    • \license.txt
      Legal stuff about CodeIgniter Project
    • \readme.rst
      Official Readme of the CodeIgniter project!
    • You will see the following default welcome screen:

Back to CodeIgniter Tutorials

Review and Tutorial: Mobirise! A FREE WYSIWYG Responsive website editor is out!

Mobirise - A WYSIWYG web designign tool

Designing a website requires an artist to be able to program in multiple languages. That person has to learn multiple languages and frameworks to be able to design like a boss!

Such nonsense! This is 2015 and all you need is the Mobirise software on your desktop and you will be ready to go! Now I should get back to what I do best! I mean writing a tutorial on how to make a webpage using Mobirise.

What this tool does is that it SAVES YOUR TIME by doing the hard work by itself. All you need to do is that after you are done, simply edit the HTML file as per your liking to fine tune it according to your need.

Follow this tutorial and you will get the following benefits:

  1. An HTML file.
  2. Properly written code.
  3. CSS Code.
  4. Plugins required in a seperate folder.
  5. Assets you used in their own respective folder.
  6. RESPONSIVEness
  7. A sweet web page.
  8. You will share 🙂

This is UPDATED for version 2.6 Now lets get started!


Download Mobirise From Here

Mobirise-installation

 

Now, install it and run.

 

You will see this.

Mobirise-Default-start-screen

Click the + button and see the sidebar like below.

885

As teh Catz has pointed out, when  you click the + button, a sidebar will EXPAND. Now, we add a MENU.

Mobirise - A WYSIWYG web designign tool

And the added menu will look like this.

Mobirise-menu-added-on-top

Now, lets add some more components, a header, and a footer.

Mobirise-header-footer-added

Now do the following.

  1. In MENU. click icon and then select ANY image. I will be updated in the interface.
  2. In HEADER, click image and change it the same way.
  3. In MENU, click any text, and its options will become visible, like font, size, color and HYPERLINK. you can delete and rename the text as you like.
  4. In Header, click text or BUTTONS and they will be editable.
  5. In footer, everything is editable as stated above.
  6. More components can be added to have a parallax effect. Let me know if I should tell you how to make a parallax effect in Mobirise 1.8.1.

Now, after editing, I got this in like 3 minutes.

116

Now, we publish and look at the files for the designed page. Simply click the “Publish” button and save to a folder in your folder/

Mobirise-publish-project

Done!


Tips

  • The backup files of your Mobirise project are saved in
    C:\Users\USERNAME\AppData\Local\Mobirise.com\Mobirise\projects\project-2015-10-29_232053\assets\images
  • Do not completely rely on Mobirise to do the job for you. I highly recommend making the structure of the website using Mobirise and then fine-tuning the features using your favourite code editor or an IDE.
  • Mobirise seems to have issues with parallax videos. I suggest you watch out and test not only on your local machine, but also on a real server and multiple browsers. Stupid IE5! x(
  • Mobirise can’t do everything, but you can :).

 


That’s it! You have just created a web page without writing a single line of code. My suggestion is to use this tool to make a template, then grow upon the template. For example, once you have made this, you can use the HTML code and assets in a CodeIgniter project. CodeIgniter is a PHP framework that makes PHP programming very quick and easy.

 

CodeIgniter 3 Tutorials are [edsanimate animation=”tada” infinite_animation=”yes” animate_on=”” ]HERE[/edsanimate]

If you liked this tutorial and enjoyed it, then do like and share this page on Facebook, twitter and Reddit. Let me know if there are any problems. If you would like me to write a tutorial for you, then let me know about that. Take care and happy coding!