You are on page 1of 20

AUTO-ROUTING IN CODEIGNITER

In the Routes.php file, we can disable our specific routing rules and let CodeIgniter do auto-

routing:

A // (double slash) in the code will disable the rest of the line.

Through the code

$routes->setAutoRoute(true);

you are allowing the CodeIgniter routing system to map URL segments directly to controller class
methods. Setting setAutoRoute(true) is often used for simpler applications where the URL structure
closely matches the controller and method names. For example, if you have a controller named Blog and
a method named show, a URL like example.com/blog/show will automatically invoke the show method
of the Blog controller.

DEFINING ADDITIONAL CONTROLLER METHODS

1. In your Item.php controller add the test method/function:

public function test(): string


{
return ('some data from function test');
}
2.

Go to your browser and type the URL localhost/ci/item/test. You should be able to see:

***Take note that since, we have set an Autoroute rule in our Routes.php file, CodeIgniter will
automatically map the URL segment ‘item/test’ with a controller and method whose names closely
match this segment.

ENHANCING THE DISPLAY PAGE (VIEWS)

1. Go to https://getbootstrap.com/docs/5.3/components/navbar/.
2. Copy the code of the navbar you prefer.

3.

Paste the code in your index.php Views file. You may paste it after the <body> tag.
4. Check your display at the URL localhost/ci/item.
5. In https://getbootstrap.com/docs/5.3/components/navbar/ navigate to the color schemes and
copy a color scheme you prefer.

6. Append the color scheme to the properties in your <nav> opening tag:
<nav class="navbar navbar-expand-lg bg-body-tertiary bg-dark border-bottom
border-body" data-bs-theme="dark" >

7. You may design as you find appropriate.


8. Check the effect to your display at the URL localhost/ci/item.

Activity 1.

Submit the screenshot of your enhanced localhost/ci/item page that shows the added navigation bar.
CREATING A MASTER PAGE

In web design, a "master page" is a concept that pertains to templates or layout structures used to
maintain consistent design elements across multiple web pages within a website. Also known by other
names like "master template," "master layout," or "master frame," the master page serves as a blueprint
for the overall structure and design of a website.

Benefits:

-consistency of elements like header, footer, navigation menu, and basic page structure among
multiple pages of the website

-ease of maintenance, e.g., design change is done once and is automatically reflected on all
pages using the master page

-code reusability, in which developers create consistent page structure and individual content
pages can focus on their unique content

1. Inside your Views/item folder, create a new folder named layout.

2. Inside your Views/item/layout folder, create a new file main.php.

3. Copy the content of your index.php Views file to your main.php file.

4. Remove the content (which is highlighted part in the figure) from your main.php file.
5. As replacement to the removed content, insert the code

<?= $this->renderSection('content') ?>

6. Then remove everything from your index.php except for the content.
7. Insert these two lines of codes at the beginning of your index.php.
<?= $this->extend('item/layout/main') ?>
<?= $this->section('content') ?>

8. Insert this code at the end of your index.php.


<?= $this->endSection('content') ?>
9. Save changes and check your display at the URL localhost/ci/item.
***main.php is serving as a master page which can be extended by any page.

SEPARATING THE NAVBAR COMPONENT

1. In your Views/item folder, create a new folder named include.


2. Inside your Views/item/include folder, create a new file navbar.php.
3. From your main.php, cut the navbar code and paste it to your navbar.php.

4. Insert this code in your main.php.


<?= $this->include('item/include/navbar') ?>
5. Save changes and check your display at the URL localhost/ci/item.
*** We now have a component specific for the navbar.

Activity 2.

Submit the screenshot of your localhost/ci/item page and your main.php.

ADDING ACTION BUTTONS

1. Go to https://getbootstrap.com/ and to click on the Docs menu. On the left pane of the page, look for
Components>Buttons. You can see the different button design configurations that you can adopt.
Look for the Button tags section and copy the script for using button classes on <a> elements.
2. Update your index.php Views file with the copied script, see Lines 22-26. We also insert the <tbody>
</tbody> tags, see Line 16 and Line 29.

***Take note we have also applied some button variants like ‘warning’ and ‘danger’ that would change
the color of the buttons.

3. We likewise insert code for the Add button, see Line 7.


4. Save changes and check your display at the URL localhost/ci/item.

5. We also modify the href attribute of the buttons.


<a class="btn btn-primary" href="<?= base_url() ?>item/add" role="button">Add</a>

<a class="btn btn-primary" href="<?= base_url() ?>item/view"


role="button">View</a>

<a class="btn btn-warning" href="<?= base_url() ?>item/edit"


role="button">Edit</a>

<a class="btn btn-danger" href="<?= base_url() ?


>item/delete" role="button">Delete</a>
***Notice that when we hover over the buttons, we can see the link to the respective controller method
at the bottom-left of the page.
*** Clicking a button will display an error since we have yet to define its controller method to call.

6. Create controller methods to test your action buttons in your Item.php, see Lines 22 - 40.
7. Save the changes and you should be able to see your test display when you click the buttons.
CREATING DISPLAY FOR ADDING ITEMS

1. In your Views/item folder, create a new file named add.php.


2. Copy the content of your index.php Views file and paste in to add.php.
3. Delete the table from your add.php, see Lines 9 – 32.

4. Your add.php should now look like this with some text modifications, see Line 6 and Line 7.

5. Update the code of your add() method in Item.php controller, see Line 29.
6. Save the changes and clicking on the Add button should lead you to your add.php page.

7. Likewise, clicking on the Back button leads you back to the index.php (main) page. 8. Go to
https://bootstrapformbuilder.com/ to create the form.
Name field
Price field

Description field
9. From the generated code, copy the code for the form.

10. Paste it to your add.php, see Lines 10-39.


11. Likewise, copy the stylesheet code from the generated code and paste it to your main.php.

DEFINING THE CRUD FUNCTIONS (Create, Read, Update, and Delete)

aka. BREAD (Browse, Read, Edit, Add, Delete)

1. Modify the code of add.php, see Line 10.

2. Create an insert() function in your Item.php controller, see Lines 32-35.


3. Save the changes and try adding an item.

***This means we are now able to handle and process the data submitted from the add.php form which
is submitted via the POST method.

4. Modify the insert() function, see Lines 32-38.


***The condition restricts the processing of POST data only when it is submitted via the form’s submit
button.

5. Modify the insert() function, see Lines 34-40.

6. Save the changes and try adding an item.


***We are now able to connect to the database model and append data to the model.

7. Notice that the URL will contain an index.php segment after adding an item. To remove, modify the
App.php file in the app/Config directory, see Line 44.

8. Save the changes and try adding an item.

***The URL

localhost/ci/index.php/item/index should now change to localhost/ci/item/index

Activity 3.

Submit the screenshot of your Add Item page, and the index (List of Items) page that appears after
clicking the Submit button. Attach also your Item.php controller file.

You might also like