BUILDING YOUR VIEW FILES

1. In your Views folder create a new folder named item. Then inside the created item folder, create
a new file named index.php.

2. Write some html code in your index.php.

3. Then in your Item controller modify the code

return view('welcome_message');
to

return view('item/index'); #this will refer to the index.php file you created

Notice, we need not to write completely the file name index.php. We may only use index.
BUILDING YOUR DATABASE

1. Go to the URL: localhost/phpMyAdmin/

2. On the phpMyAdmin home screen, you'll see a list of databases on the left sidebar. You can create
a new database by clicking on "New."
3. In the "Create database" form, enter dborder as the name for your new

database. 4. Select the utf8mb4_general_ci collation (character set).

5. Click "Create."

***Take note on how we followed a naming convention for the database, we used ‘db’ + order, a
naming convention indicating it is a database.

Creating Tables

1. After creating the database, click on its name in the left sidebar. This will take you to the
database management page.

2. In the Create new table, put tblitem as table name and 6 as the number of columns, then click

Create. 3. Fill in the table attributes (column names):

id: Type – int, A_I (auto increment checked)

name: Type – varchar, Length - 100

description: Type – text

price: Type – Type – float, Length/Values – 8.2

created_at – Type: timestamp, Default – current_timestamp()

updated_at – Type: timestamp, Default – current_timestamp()

4. Click "Save."

***Notice that we added two columns created_at and updated_at. Both of these columns are part of a
common database design pattern referred to as "timestamping." They can be managed manually by
application code, but they are often handled automatically by database management systems, like
MySQL, when set as timestamp fields. This automation ensures that developers don't need to manually
update these fields when a record is created or updated, making data tracking and maintenance more
efficient.

5. Click Insert to add table values. Insert atleast 3 items.

***Selecting the Browse menu displays the table items you inputted.
BUILDING YOUR MODEL FILE

After creating the database, we can now create a model file for the project.

1.In your Model folder create a new file named ItemModel.php.

2. Write the following codes in your ItemModel.php:

<?php

namespace App\Models;

use CodeIgniter\Model;
class ItemModel extends Model
{
protected $table = 'tblitem';
protected $primaryKey = 'id';
protected $allowedFields = ['name', 'description', 'price'];
protected $returnType = 'object';
}

***You may also copy and modify the code template from CodeIgniter’s
documentation (codeigniter.com/user_guide). Search for ‘Modeling Data’ >>
‘Configuring Your Model’

3. Go to your app/Config/ folder and open the file Database.php. For the default database connection,
set the parameters username => ‘root’ and database => ‘dborder’. Save the changes made to your
Database.php file.
WORKING ON CONTROLLER AND VIEW FILES TO DISPLAY DATABASE

CONTENT 1. In your Item.php controller modify the code as follows:

2. Save the changes made to your Item.php.

***A common practice in CodeIgniter is to load and use models within a controller to handle
interactions with the database or perform other business logic related to your application's data. The
code is a common pattern in CodeIgniter for retrieving data from a model and passing it to a view to be
displayed in a web page.
$item_model = new \App\Models\ItemModel();

After the above line of code is executed, you will have an instance of the database stored in the
$item_model variable.

$data['items'] = $item_model->findAll();
After the above line of code, the $data array will contain an element 'items' that holds the list of items
retrieved from your model.

return view('item/index',$data);

The first parameter, 'item/index', specifies the view file you want to load. It indicates that we want to
load the index.php which is a View file within the item folder. The second parameter, $data, is an
array containing the data we want to pass to this view. In this case, we are passing the 'items' array,
which contains the list of items.

3. Modify your index.php in your Views\item folder:

4. Save the changes made to your index.php.

***Take note that $items is the name of our list that was passed from the controller Item.php.
5. We should now be able to display the data fetched from the model in our view. Go to the
URL localhost/ci/item.
ENHANCING OUR VIEW DISPLAY USING BOOTSTRAP

1.Go to https://getbootstrap.com/

2. Copy the href and src links into your index.php View file.
In HTML, the <link> and <script> elements are used to include external resources like stylesheets (CSS)
and scripts (usually JavaScript) in a web page. Both elements play a vital role in structuring web
documents and enhancing the user experience on the web. They help maintain separation of concerns,
making your code more modular and maintainable.

Usage:

-By linking an external CSS file using the <link> element, you can separate your page's structure (HTML)
from its presentation (CSS), making your code more organized and maintainable.

-JavaScript can be used to create interactive elements, validate forms, modify the DOM (Document
Object Model), and perform a wide range of client-side tasks. The <script> element is crucial for
integrating JavaScript into your web pages.

3. Save the changes made to your index.php Views file. Check your display at localhost/ci/item.

4. Feel free to perform some page design configurations to enhance the display. For example, go to
https://getbootstrap.com/ and to click on the Docs menu. On the left pane of the page, look for
Content>Tables. You can see the different table design configurations that you can adopt. In our
demonstration example, we use the striped rows for the table.
Here is the latest code for our index.php View file. The additional codes are highlighted. Indentation of
codes are also made for better code readability.
*** The <div> element in HTML, short for "division," is a non-semantic container element that is used for
grouping and structuring content within a web page. It doesn't have any inherent meaning or styling on
its own but serves as a generic container that allows you to apply CSS styles and JavaScript behaviors to
groups of content.

5. Save the changes made to your index.php Views file. Go to the URL localhost/ci/item.

Activity 3.

Submit screenshot of your own display when you type the URL localhost/ci/item.