Create A Simple Website Using Codeigniter
FINAL OUTPUT:
In this tutorial, you will learn how to create a simple website using codeigniter framework. Follow the below steps to create this website.
Step 1.
Download the codeigniter and extract zip file. Now put codeigniter folder on server folder like(www or htdocs).
Step 2.
Configure your codeigniter website.
Open file (config.php) under the directory application/config/config.php. and set base url and save file.
[php]
$config[‘base_url’] = ‘http://localhost/your-domain/’;
[/php]
STEP 3.
Enable some helper. Open the file under the directory(/application/config/autoload.php) and update code.
[php]
$autoload[‘helper’] = array(‘url’);
[/php]
STEP 4.
Ok. Now we will write some code to remove index.php from url for better SEO (seo friendly url).
- (directory structure)
- application
- system
- user_guide
- .htaccess
- index.php
- license.txt
So to achieve this goal, create a file .htaccess in root directory and paste the below code in this file.
[php]
RewriteEngine on
RewriteCond $1 !^(index\.php|(.*)\.swf|forums|images|css|downloads|jquery|js|robots\.txt|favicon\.ico)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ ./index.php?$1 [L,QSA][/php]
Please make sure that your rewrite module in enable in apache.ini file.
STEP 5.
Create a new controller file (home.php) under the directory application/controller/home.php and paste the following code inside:
[php]
<?php if ( ! defined(‘BASEPATH’)) exit(‘No direct script access allowed’);
class Home extends CI_Controller {
/**
* Index Page for this controller.
*
* Maps to the following URL
* http://example.com/index.php/welcome
* – or –
* http://example.com/index.php/welcome/index
* – or –
* Since this controller is set as the default controller in
* config/routes.php, it’s displayed at http://example.com/
*
* So any other public methods not prefixed with an underscore will
* map to /index.php/welcome/<method_name>
* @see http://codeigniter.com/user_guide/general/urls.html
*/
public function index()
{
$this->load->view(‘header’);
$this->load->view(‘home’);
}
}
/* End of file welcome.php */
/* Location: ./application/controllers/welcome.php */
1
<strong>Step 6. </strong>Update your route.php file under the directory(/application/config/routes.php ).
1
$route[‘default_controller’] = "home";
$route[‘404_override’] = ”;
[/php]
STEP 6.
Create a view (home.php) under the directory(/application/views/home.php). And paste the following code in it.
[php]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Create simple website using codeigniter</title>
<!– Latest compiled and minified CSS –>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!– Latest compiled and minified Jquery library –>
<script src=’https://code.jquery.com/jquery-2.1.1.min.js’></script>
<!– Latest compiled and minified JavaScript –>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> <a class="navbar-brand" href="#">CodeIgniter</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">Home</a>
</li>
<li>
<a href="#">Protfolio</a>
</li>
<li>
<a href="#">About us</a>
</li>
<li>
<a href="#">Contact us</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<blockquote>
<h1>Create a simple website using codeigniter</h1>
<cite>By vikram parihar</cite>
</blockquote>
</div>
</body>
</html>
[/php]
STEP 7.
The head section of the website will remain same in all pages so we put these code in a separate file and render it in home.php controller. So achieve this task create a file (header.php) under the directory (/application/views/header.php) and paste following code in it.
[php]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Create simple website using codeigniter Meul Tech </title>
<!– Latest compiled and minified CSS –>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!– Latest compiled and minified Jquery library –>
<script src=’https://code.jquery.com/jquery-2.1.1.min.js’></script>
<!– Latest compiled and minified JavaScript –>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> <a class="navbar-brand" href="<?php echo base_url() ?>">CodeIgniter</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">
<a href="<?php echo base_url() ?>">Home</a>
</li>
<li>
<a href="<?php echo base_url() ?>home/portfolio">Protfolio</a>
</li>
<li>
<a href="<?php echo base_url() ?>home/about_us">About us</a>
</li>
<li>
<a href="<?php echo base_url() ?>home/contact_us">Contact us</a>
</li>
</ul>
<ul class="nav navbar-nav pull-right">
<li>
<a href="http://facebook.com/webrocom.learn"><img style="height: 17px;" src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678128-social-facebook-32.png"/></a>
</li>
<li>
<a href="http://twitter.com/webrocom"><img style="height: 17px;" src="https://cdn1.iconfinder.com/data/icons/logotypes/32/square-twitter-32.png"/></a>
</li>
<li>
<a href="https://plus.google.com/+WebrocomNetwebrocom/"><img style="height: 17px;" src="https://cdn1.iconfinder.com/data/icons/logotypes/32/square-google-plus-32.png"/></a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
[/php]
Now update your (home.php file) under the directory (/application/controller/home.php) and paste following code.
[php]
<?php if ( ! defined(‘BASEPATH’)) exit(‘No direct script access allowed’);
class Home extends CI_Controller {
/**
* Index Page for this controller.
*
* Maps to the following URL
* http://example.com/index.php/welcome
* – or –
* http://example.com/index.php/welcome/index
* – or –
* Since this controller is set as the default controller in
* config/routes.php, it’s displayed at http://example.com/
*
* So any other public methods not prefixed with an underscore will
* map to /index.php/welcome/<method_name>
* @see http://codeigniter.com/user_guide/general/urls.html
*/
public function index()
{
$this->load->view(‘header’);
$this->load->view(‘home’);
}
}
/* End of file welcome.php */
/* Location: ./application/controllers/welcome.php */
[/php]
STEP 8.
Now type in url (http://your-codeignitor-application/).
STEP 9.
Create following php files under the directory (/application/view/).
aboutUs.php
contactUs.php
portfolio.php
and paste the following codes.
Paste following code in aboutUs.php under the directory(/application/view/aboutUs.php)
[php]
<div class="container">
<div class="row clearfix">
<div class="col-md-8 column">
<div class="page-header">
<h1>
Example page header <small>Subtext for header</small>
</h1>
</div><img alt="140×140" src="http://lorempixel.com/140/140/" />
<p>
Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
</p>
<blockquote>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</p> <small>Someone famous <cite>Source Title</cite></small>
</blockquote>
</div>
<div class="col-md-4 column">
<div class="list-group">
<a href="#" class="list-group-item active">Home</a>
<div class="list-group-item">
List header
</div>
<div class="list-group-item">
<h4 class="list-group-item-heading">
List group item heading
</h4>
<p class="list-group-item-text">
…
</p>
</div>
<div class="list-group-item">
<span class="badge">14</span>Help
</div> <a class="list-group-item active"><span class="badge">14</span>Help</a>
</div>
</div>
</div>
</div>
</body>
</html>
[/php]
Paste following code in contactUs.php under the directory(/application/view/ContactUs.php).
[php]
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<div class="row clearfix">
<div class="col-md-6 column">
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Name</label><input class="form-control" id="exampleInputEmail1" type="text" />
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label><input class="form-control" id="exampleInputEmail1" type="email" />
</div>
<div class="form-group">
<label for="exampleInputEmail1">Comment</label>
<textarea class="form-control">
</textarea>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div class="col-md-6 column">
<h3>
Contact us
</h3> <address> <strong>Twitter, Inc.</strong><br /> 795 Folsom Ave, Suite 600<br /> San Francisco, CA 94107<br /> <abbr title="Phone">P:</abbr> (123) 456-7890</address>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
[/php]
Paste following code in portfolio.php under the directory(/application/view/portfolio.php).
[php]
<div class="container">
<div class="row clearfix">
<div class="col-md-12">
<blockquote>
<h1>Portfolio page</h1>
</blockquote>
</div>
</div>
<div class="row clearfix">
<div class="col-md-12 column">
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img alt="300×200" src="http://lorempixel.com/600/200/people" />
<div class="caption">
<h3>
Thumbnail label
</h3>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
<p>
<a class="btn btn-primary" href="#">Action</a> <a class="btn" href="#">Action</a>
</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img alt="300×200" src="http://lorempixel.com/600/200/city" />
<div class="caption">
<h3>
Thumbnail label
</h3>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
<p>
<a class="btn btn-primary" href="#">Action</a> <a class="btn" href="#">Action</a>
</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img alt="300×200" src="http://lorempixel.com/600/200/sports" />
<div class="caption">
<h3>
Thumbnail label
</h3>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
<p>
<a class="btn btn-primary" href="#">Action</a> <a class="btn" href="#">Action</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
[/php]
STEP 10.
Finally update the home.php file under the directory(application/controller/home.php).
[php]
<?php if ( ! defined(‘BASEPATH’)) exit(‘No direct script access allowed’);
class Home extends CI_Controller {
/**
* Index Page for this controller.
*
* Maps to the following URL
* http://example.com/index.php/welcome
* – or –
* http://example.com/index.php/welcome/index
* – or –
* Since this controller is set as the default controller in
* config/routes.php, it’s displayed at http://example.com/
*
* So any other public methods not prefixed with an underscore will
* map to /index.php/welcome/<method_name>
* @see http://codeigniter.com/user_guide/general/urls.html
*/
public function index()
{
$this->load->view(‘header’);
$this->load->view(‘home’);
}
public function portfolio()
{
$this->load->view(‘header’);
$this->load->view(‘portfolio’);
}
public function about_us()
{
$this->load->view(‘header’);
$this->load->view(‘aboutUs’);
}
public function contact_us()
{
$this->load->view(‘header’);
$this->load->view(‘contacUs’);
}
}
/* End of file welcome.php */
/* Location: ./application/controllers/welcome.php */
[/php]
Finally, your Codeigniter website is ready. Enjoy the code.
Don’t forget to share your doubts in the comment box and also share this post on social media and with your friends because “You share, I share, let’s make the world aware”.
You may want to take a look at the following related posts:
- Ajax Login System in PHP Codeigniter
- Create, Read, Update and Delete Records in Codeigniter using Ajax – CRUD OPERATION
- Create A Simple Website Using Codeigniter
Also for more awesome tutorials, please don’t forget to like our facebook page Meul Tech .
Bonus: We also give training on following topics:
1. Angular Training in Mumbai.
2. Bootstrap Training Course in Mumbai.
3. Web Designing Training in Mumbai.
4. UI / UX Training.