Programming Codeigniter How to create a new CodeIgniter project

How to create a new CodeIgniter project

How to create a new CodeIgniter project - Techbriefers

As you have gone through the previous tutorials of this CodeIgniter Tutorial series. You must be aware of the basics of the CodeIgniter framework. How I prefer learning anything is by working on it. I software development, the best way to learn is by creating projects. So I am explaining here that How to create a CodeIgniter Project. This will enforce you to learn quickly.

Contents show

To create a CodeIgniter project, firstly we need to install it. You can install CodeIgniter in two ways.

  1. By composer
  2. Simply by downloading folder and working with XAMPP or WAMP or LAMP etc.

In this tutorial, I am explaining the simplest way to start with. In this method, simply download a copy and start working in simple steps.

How to install CodeIgniter in the simplest way

Step 1: Download the framework

Got to https://www.codeigniter.com/download and download the latest stable build. As I am showing in the screenshot below, I have chosen CodeIgniter 3. When you will click on the download link, a zip file will be downloaded on your system.

Download page of Codeignier.com - techbriefers

Step 2: Extract the zipped files.

Now you will have to extract the zipped files to the folder. When you will unzip the folder then, a folder will be created named “CodeIgniter-3.1.10” in which all files will be present.

Step 3: Create a project folder

To create a web project you need a web server on your system. You can choose any web server Like XAMPP or WAMP or LAMP. I am using XAMPP Web server.

In XAMPP, you need to create a project folder in XAMPP/htdocs folder. However, if you are using WAMP then create your project folder in the www directory of WAMP. I am creating a project folder with name = “cidemo”.

Step 4: Move all CodeIgniter files to project folder

You can keep the folder name of your choice. I recommend naming the folder on your chosen project name. Like: My First Web is your project, and then give the name you folder like “myfirstweb”.

Now, move all the files from the “CodeIgniter-3.1.10” folder to “cidemo” (or your project folder). You can skip or delete user_guide, it’s your choice.

CodeIgniter files - techbriefers

Your project is created with the default pages by CodeIgniter. Go to the browser and enter the URL http://localhost/cidemo/. It will display the default page which will look like below image.

How to Change Welcome page of CodeIgniter

After finishing the installation of the CodeIgniter framework, we get a welcome page. It also displays a heading Welcome to CodeIgniter!

To show this page there is a default controller given by the framework named Welcome. It has a few lines of code which is responsible for showing such a page. The code is:

public function index()
{
   $this->load->view('welcome_message');
}

As you can see in the code above, a view is called to show the welcome page. That view is welcome_message.php. This file resides in application\views folder. To change a welcome page, you need to change the HTML code in this file.

To change welcome page, simply replace body tag code to the code I am giving below.

<body>
<div class="header col-md-12 col-sm-12 col-xs-12 text-center">
    <div class="techb-main-menu techb-menu techb-menu-horizontal col-md-9 col-sm-12 col-xs-12">
        <a class="techb-menu-heading col-xs-12" href="https://demo.techbriefers.com/">
            <img src="https://demo.techbriefers.com/assets/techbriefers-demos.png" alt="Techbriefers Demo">
        </a>
        <ul class="techb-menu-list">
            <li class="techb-menu-item techb-menu-selected"><a href="https://techbriefers.com/" class="techb-menu-link">Techbriefers
                    Home</a>
            </li>
        </ul>
    </div>
</div>

<div class="content-wrapper row col-md-12 col-sm-12 col-xs-12">
    <div class="content col-lg-10 col-md-12 col-sm-12 col-xs-12">
        <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12">
            <div class="sidebar-left">

            </div>
        </div>
        <div class="col-lg-7 col-md-9 col-sm-12 col-xs-12 content-middle">
            <div class="">
                <div class="content-mid-heading"><a href="#">This is a sample Page</a></div>

                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

                </div>
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <img src="https://techbriefers.com/wp-content/uploads/2019/08/codeigniter-introduction-features-and-working-techbriefers.jpg">
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 sidebar-right">
        </div>
    </div>
    <div class="clearfix"></div>
</div>
<div class="clearfix"></div>
<div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12 footer l-box is-center">
        Copyright © 2019 Techbriefers
    </div>
</div>
</body>

And put this code in the head section of HTML.

<meta charset="utf-8">
    <title>Welcome to CodeIgniter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://demo.techbriefers.com/assets/style.css" rel="stylesheet">
    <link rel="icon" href="https://demo.techbriefers.com/assets/favicon.png" type="image/png">
    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono&display=swap" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <link href="https://demo.techbriefers.com/assets/bootstrap.min.css" rel="stylesheet">
    <script src="https://demo.techbriefers.com/assets/bootstrap.min.js"></script>
    <style>.content-mid-heading a{border-bottom:none}.content-mid-heading a:hover{text-decoration: none;color: #ef3e47;}</style>

This will create a new layout of your welcome page.

Share this article

Leave a Reply