Building My Class Website (Day 1 | Setting Up Everything)

22 May

Ok, so as promised I will be uploading documentation on how I’m going to build my (dream) class website.

Here it is! 😀

Task 1: Installing and Configuring Sublime, XAMPP and CodeIgniter

Step 1: Install Sublime Text Editor 3:

First things first. Since we are going to build a website, we need a good Text Editor to help us in the coding process. There are a lot of good text editors out there but Sublime Text Editor 3 is my preferred one.

Why Sublime? well, because it’s my favorite. That’s all. 😀

Ok, so without further adew, let’s download and install it.

To begin with our download, go to the website indicated in the address bar of this screenshot.

Note: Since I am using Windows 8 (32 bit), I chose Windows. Just click Windows and download will now begin.

Sublime Text 3 downlaod.PNG

Next, after downloading, we will now install Sublime on our machine. After double-clicking the installation setup, the following windows will appear.

Note: Just click next if you want to install it on your default drive. Here, I installed it on D drive because I only have limited space on my C drive.

That’s it. EZ :).

Ok, so next we need to install a web server – the one which will host web services to run our website. Apparently, there are 2 web servers available out there that can run on Windows systems, namely, WAMP and XAMPP.

You can check the distinction between the two here.

Step 2: Installing Apache, PHP and MYSQL:

In this project, I prefer to use XAMPP because I had a problem with WAMP lately.

So, let’s go to the XAMPP website to download our web server.

Here, I chose Version 5.6.30 / PHP 5.6.30Install XAMPP 1

Install XAMPP 2

To install, double click the setup file and then click the Next button in the Setup Wizard.

Note: If you prefer to install it in different location such as the one I did. Just change the location to where you want to install it. In my case, I installed it on my D Drive because again, I don’t have enough space in my default drive. 

Then wait for this to finish…(it may take a while so better do something to kill your boredom :D)

Install XAMPP 8

Install XAMPP 9

After finishing the installation, the Control Panel will now start. But before that, XAMPP will ask you for the default language to use. Just choose the first one and click Save.

Install XAMPP 10

The Control Panel will now show up and by default, nothing is running at the moment so we need to manually start the Apache and MySQL.


So next, we will now check if Apache is properly running on our system.

To check, open the web browser. In the address bar, type http://localhost. 

If the installation is successful, You should be able to see this page:


So that’s for the Apache and PHP part.

Sp next, we want to know if our MySQL (database engine) is also running properly.

To test, just click PHPMyAdmin located at the menu bar of XAMPP page.

If MySQL is running properly, you should be able to do see this page:


That’s it. 🙂

So we’ll proceed now to step 3 which is installing CodeIgniter – the framework that we will use on our website.

Step 3: Installing CodeIgniter:

Ok, so here, we are now going to install CodeIgniter on our machine. CodeIgniter is one of the best frameworks used nowadays to build a website.

To start with the installation, just go to CodeIgniter website and download CodeIgniter 2.x.Codeigniter download.PNG

After that, extract the files:

Install CodeIgniter

Then we need to move the application (folder), system (folder), license.txt and index.php to xampp>htdocs>myweb folder to install codeigniter.

Install CodeIgniter 2.png

Install CodeIgniter 3.png

So next, we will now check if our installation is running.

To check, just open up the browser and in the URL type http://localhost/myweb.

If the installation is successful, you should be able to see this page:

Install CodeIgniter 4.PNG

Congratulations! We’ve now successfully installed everything on our machine.

Next Task: Configuring CodeIgniter.


Tags: , , , ,

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: