How to Develop AdminUnit Management System By Using CodeIgniter

Hello Developer! today I want to share the most useful and commercialized system for everyone.AdminUnit Management System is a system that is used to manage the structure of our projects. It manages the locations of the users, it provides a hierarchy of our systems.

The responsibility of the admin unit management system is

  1. Manage the structure
  2. Manage Address
  3. Manage Locations
  4. Manage User Records
  5. Assist entry-level system

We can develop an admin unit we can use any development technology like open source, C#, Python, and other technology.

For these tutorials, we use the PHP CodeIgniter framework with Bootstrap free open sources.

To develop an admin unit system by using the Codeigniter PHP framework follow the following steps

1. Design Admin Unit System

Designing is the process of visualizing our project to the customers. At the design level, there are two types we cover. Front-end design and database design.

Front-end design

In front-end design, we cover client-side technology, HTML, CSS, JS, JQuery, and others.

Designing what the layout of the system looks like.

We use for these training bootstrap opensource technology, and cover all concepts based on Bootstraps,

  • how to use Bootstrap
  • How to create a user interface with Bootstrap
  • How to use Grid Bootstrap and others

Database Design

Database design is the design of a database according to our database models. Database design is also called back-end design. In database design concepts those are Logical design, Conceptual design, and physical design.

Conceptual database design is an analyzing data stored concept.

AdminUnit Management has the following Modules

  1. Manage Country
  2. Manage City
  3. Manage Zones
  4. Manage Woreda
  5. Manage district
  6. Manage Location and address

The above six modules have their own CRUD Operations

C: CREATE

R: READ

U: UPDATE
D: DELETE Operation

Let’s start coding one by one step.

Download CodeIgniter Framework

Download Codeigniter from the official websites. Extract the downloaded file and copy the extracted folder to the c:/xampp/htdocs folder and create a folder named it aum past copy files and folders on it.

Start your server apache and MySQL servers.

After starting your servers run your project by cooling the following URL on your browsers. HTTP://localhost/aum

http://localhost/aum/

the above image shows a fresh Codeigniter installation project.

Working With Project

Working on a project means developing the application by using a code editor and database tools

We use a code-first approach for development

Open your project with the code editor you have. for training, we use phpstrom code editor free versions.

fresh open of aum folder with phpstorm

select application/views and create folder template

In folder, template create five(5) PHP files link.php, topmenu.php, sidemenu.php,dashboard.php and footer.php as in the image below

The above image is used to add an admin template to our projects.

Admin Template Integrations

Admin template is an HTML, CSS, and JS collection to speed up our project development time. We use it directly copying and pasting where we want on our projects.

To download the Admin template we used on these tutorials click these links Pike Admin and download it.

After Downloading the Pike admin extract it where you want. Open Pike admin and copy the folder assets and paste it to your project folder.

As image below

the above image shows a copy asset folder of Pike admin to our projects.

Asset folder contains folders like CSS, data,font-awesome, images, js, plugins, and other files.

How to Use Pike admin to Our project

To use the Pike admin template for our project open the file index.html by code editor file found on the Pike admin folder and create the folder template and create file link.php,topmenu.php,sidemenu.php,dashboard.php,footer.php as follows.

link.php

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<title>Admin Unit Management System</title>
	<meta name="description" content="Free Bootstrap 4 Admin Theme | Pike Admin">
	<meta name="author" content="bbn11.com">

	<!-- Favicon -->
	<link rel="shortcut icon" href="<?php echo base_url()?>assets/images/favicon.ico">

	<!-- Bootstrap CSS -->
	<link href="<?php echo base_url()?>assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

	<!-- Font Awesome CSS -->
	<link href="<?php echo base_url()?>assets/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

	<!-- Custom CSS -->
	<link href="<?php echo base_url()?>assets/css/style.css" rel="stylesheet" type="text/css" />

	<!-- BEGIN CSS for this page -->
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css"/>
	<!-- END CSS for this page -->

</head>

the above code is used to access the CSS files from asset folders

Topmenu.php

<body class="adminbody">

<div id="main">

	<!-- top bar navigation -->
	<div class="headerbar">

		<!-- LOGO -->
		<div class="headerbar-left">
			<a href="#" class="logo"><img alt="Logo" src="<?php echo base_url() ?>assets/images/logo.png"/>
				<span>Admin</span></a>
		</div>

		<nav class="navbar-custom">

			<ul class="list-inline float-right mb-0">

				<li class="list-inline-item dropdown notif">
					<a class="nav-link dropdown-toggle arrow-none" data-toggle="dropdown" href="#" role="button"
					   aria-haspopup="false" aria-expanded="false">
						<i class="fa fa-fw fa-question-circle"></i>
					</a>
					<div class="dropdown-menu dropdown-menu-right dropdown-arrow dropdown-arrow-success dropdown-lg">
						<!-- item-->
						<div class="dropdown-item noti-title">
							<h5><small>Help and Support</small></h5>
						</div>

						<!-- item-->
						<a target="_blank" href="https://www.pikeadmin.com" class="dropdown-item notify-item">
							<p class="notify-details ml-0">
								<b>Do you want custom development to integrate this theme?</b>
								<span>Contact Us</span>
							</p>
						</a>

						<!-- item-->
						<a target="_blank" href="https://www.pikeadmin.com/pike-admin-pro"
						   class="dropdown-item notify-item">
							<p class="notify-details ml-0">
								<b>Do you want PHP version of the theme that save dozens of hours of work?</b>
								<span>Try Pike Admin PRO</span>
							</p>
						</a>

						<!-- All-->
						<a title="Clcik to visit Pike Admin Website" target="_blank" href="https://www.pikeadmin.com"
						   class="dropdown-item notify-item notify-all">
							<i class="fa fa-link"></i> Visit Pike Admin Website
						</a>

					</div>
				</li>

				<li class="list-inline-item dropdown notif">
					<a class="nav-link dropdown-toggle arrow-none" data-toggle="dropdown" href="#" role="button"
					   aria-haspopup="false" aria-expanded="false">
						<i class="fa fa-fw fa-envelope-o"></i><span class="notif-bullet"></span>
					</a>
					<div class="dropdown-menu dropdown-menu-right dropdown-arrow dropdown-arrow-success dropdown-lg">
						<!-- item-->
						<div class="dropdown-item noti-title">
							<h5><small><span class="label label-danger pull-xs-right">12</span>Contact Messages</small>
							</h5>
						</div>

						<!-- item-->
						<a href="#" class="dropdown-item notify-item">
							<p class="notify-details ml-0">
								<b>Jokn Doe</b>
								<span>New message received</span>
								<small class="text-muted">2 minutes ago</small>
							</p>
						</a>

						<!-- item-->
						<a href="#" class="dropdown-item notify-item">
							<p class="notify-details ml-0">
								<b>Michael Jackson</b>
								<span>New message received</span>
								<small class="text-muted">15 minutes ago</small>
							</p>
						</a>

						<!-- item-->
						<a href="#" class="dropdown-item notify-item">
							<p class="notify-details ml-0">
								<b>Foxy Johnes</b>
								<span>New message received</span>
								<small class="text-muted">Yesterday, 13:30</small>
							</p>
						</a>

						<!-- All-->
						<a href="#" class="dropdown-item notify-item notify-all">
							View All
						</a>

					</div>
				</li>

				<li class="list-inline-item dropdown notif">
					<a class="nav-link dropdown-toggle arrow-none" data-toggle="dropdown" href="#" role="button"
					   aria-haspopup="false" aria-expanded="false">
						<i class="fa fa-fw fa-bell-o"></i><span class="notif-bullet"></span>
					</a>
					<div class="dropdown-menu dropdown-menu-right dropdown-arrow dropdown-lg">
						<!-- item-->
						<div class="dropdown-item noti-title">
							<h5><small><span class="label label-danger pull-xs-right">5</span>Allerts</small></h5>
						</div>

						<!-- item-->
						<a href="#" class="dropdown-item notify-item">
							<div class="notify-icon bg-faded">
								<img src="<?php echo base_url() ?>assets/images/avatars/avatar2.png" alt="img"
									 class="rounded-circle img-fluid">
							</div>
							<p class="notify-details">
								<b>John Doe</b>
								<span>User registration</span>
								<small class="text-muted">3 minutes ago</small>
							</p>
						</a>

						<!-- item-->
						<a href="#" class="dropdown-item notify-item">
							<div class="notify-icon bg-faded">
								<img src="<?php echo base_url() ?>assets/images/avatars/avatar3.png" alt="img"
									 class="rounded-circle img-fluid">
							</div>
							<p class="notify-details">
								<b>Michael Cox</b>
								<span>Task 2 completed</span>
								<small class="text-muted">12 minutes ago</small>
							</p>
						</a>

						<!-- item-->
						<a href="#" class="dropdown-item notify-item">
							<div class="notify-icon bg-faded">
								<img src="<?php echo base_url() ?>assets/images/avatars/avatar4.png" alt="img"
									 class="rounded-circle img-fluid">
							</div>
							<p class="notify-details">
								<b>Michelle Dolores</b>
								<span>New job completed</span>
								<small class="text-muted">35 minutes ago</small>
							</p>
						</a>

						<!-- All-->
						<a href="#" class="dropdown-item notify-item notify-all">
							View All Allerts
						</a>

					</div>
				</li>

				<li class="list-inline-item dropdown notif">
					<a class="nav-link dropdown-toggle nav-user" data-toggle="dropdown" href="#" role="button"
					   aria-haspopup="false" aria-expanded="false">
						<img src="<?php echo base_url() ?>assets/images/avatars/admin.png" alt="Profile image"
							 class="avatar-rounded">
					</a>
					<div class="dropdown-menu dropdown-menu-right profile-dropdown ">
						<!-- item-->
						<div class="dropdown-item noti-title">
							<h5 class="text-overflow"><small>Hello, admin</small></h5>
						</div>

						<!-- item-->
						<a href="pro-profile.html" class="dropdown-item notify-item">
							<i class="fa fa-user"></i> <span>Profile</span>
						</a>

						<!-- item-->
						<a href="#" class="dropdown-item notify-item">
							<i class="fa fa-power-off"></i> <span>Logout</span>
						</a>

						<!-- item-->
						<a target="_blank" href="https://www.pikeadmin.com" class="dropdown-item notify-item">
							<i class="fa fa-external-link"></i> <span>Pike Admin</span>
						</a>
					</div>
				</li>

			</ul>

			<ul class="list-inline menu-left mb-0">
				<li class="float-left">
		<button class="button-menu-mobile open-    left">
						<i class="fa fa-fw fa-bars"></i>
					</button>
				</li>
			</ul>

		</nav>

	</div>
	<!-- End Navigation -->

The code used to create the top menu as the image below

The above image is used to show how to create a top menu

sidemenu.php

<!-- Left Sidebar -->
<div class="left main-sidebar">

	<div class="sidebar-inner leftscroll">

		<div id="sidebar-menu">

			<ul>

				<li class="submenu">
					<a class="active" href="<?php echo base_url()?>"><i class="fa fa-fw fa-bars"></i><span> Dashboard </span> </a>
				</li>

				<li class="submenu">
					<a href="<?php echo base_url('country-list')?>"><i class="fa fa-fw fa-globe"></i><span> Country Management </span> </a>
				</li>



				<li class="submenu">
					<a href="#"><i class="fa fa-fw fa-sitemap"></i> <span> Regional Management </span> <span class="menu-arrow"></span></a>
					<ul class="list-unstyled">
						<li><a href="ui-alerts.html">Region List</a></li>
						<li><a href="ui-alerts.html">Zone List</a></li>
						<li><a href="ui-buttons.html">Kebele</a></li>
					</ul>
				</li>

				<li class="submenu">
					<a href="#"><i class="fa fa-fw fa-file-text-o"></i> <span> City Management </span> <span class="menu-arrow"></span></a>
					<ul class="list-unstyled">
						<li><a href="forms-general.html">City List</a></li>
					</ul>
				</li>

				</li>

			</ul>

			<div class="clearfix"></div>

		</div>

		<div class="clearfix"></div>

	</div>

</div>
<!-- End Sidebar -->

These are used to create a Side menu as image below

the above image shows the side menu contents

Container.php

<div class="content-page">

	<!-- Start content -->
	<div class="content">

		<div class="container-fluid">

			<div class="row">
				<div class="col-xl-12">
					<div class="breadcrumb-holder">
						<h1 class="main-title float-left">Countries</h1>
						<ol class="breadcrumb float-right">
							<li class="breadcrumb-item">List</li>
							<li class="breadcrumb-item active">All</li>
						</ol>
						<div class="clearfix"></div>
					</div>
				</div>
			</div>
			<!-- end row -->
			<div class="row">

				<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
					<div class="card mb-3">
						<div class="card-header">
							<h3><i class="fa fa-table"></i> Country List
								<a href="<?php echo base_url('add-country')?>" class="btn btn-sm btn-primary float-right"><i class="fa fa-plus"></i> Add
									New</a>
							</h3>
							<?php
							if($this->session->flashdata('success')){ ?>
								<div class="alert alert-warning alert-dismissible fade show" role="alert">
								<strong>Success</strong> <?= $this->session->flashdata('success') ?>.
							<button type="button" class="close" data-dismiss="alert" aria-label="Close">
								<span aria-hidden="true">×</span>
							</button>
						</div>
							<?php
							} else if($this->session->flashdata('error')){
								?>
								<div class="alert alert-warning alert-dismissible fade show" role="alert">
									<strong>Success</strong> <?= $this->session->flashdata('error');?>.
									<button type="button" class="close" data-dismiss="alert" aria-label="Close">
										<span aria-hidden="true">×</span>
									</button>
								</div>
							<?php
							}
							?>

						</div>

						<div class="card-body">

							<table class="table table-responsive-xl table-bordered">
								<thead>
								<tr>
									<th scope="col">#</th>
									<th scope="col">Country Name</th>
									<th scope="col">Action</th>
								</tr>
								</thead>
								<tbody>
								<?php $no = 0;
								foreach ($countries as $country) {
									$no++; ?>
									<tr>
										<th scope="row"><?php echo $no;?></th>
										<td><?php echo $country->country_name?></td>
										<td>
											<a href="#" class="btn btn-sm btn-info">Edit</a>
											<a href="#" class="btn btn-sm btn-danger">Delete</a>
										</td>
									</tr>
								<?php } ?>
								</tbody>
							</table>

						</div>
					</div><!-- end card-->
				</div>


			</div>
		</div>
	</div>
</div>

the above code shows the table list of the country in the admin unit control manages

To download the full project click the link below

https://bbn11.com/wp-content/uploads/2024/03/aum.zip

full system dashboard above images.

Author: bbnadmin

Leave a Reply

Your email address will not be published. Required fields are marked *